動的列を使用してJSONをテーブルに変換する

Question

サンプルJSONがあり、テーブルに変換したいが、列名については保証できません。例えば

：

{ 
    "name":"John", 
    "age":30, 
    "cars":"Ford" 
} 

か：私はDataTableを介して行っていると、それが列ヘッダーを追加すると言う

Name Age Cars 
John 30 Ford 

：

{ 
    "test":"Max", 
    "data":"sdfsdfsdf", 
    "mad":"hello ", 
    "max":"world", 
    "sample":"testData", 
    "data":"skjdf" 
} 

最初はこのようにテーブルを表示する必要がありますデータを取得するには、列名はわかりません。

Answer 1

ほとんどのライブラリには事前定義された列のリストが必要なので、自分のテーブルを作成するのが最も安全だと思います。あなたは次のことを試すことができます：あなたは、その後、たとえば、あなたが好きなノードに体を結果を追加することができ

function createTable(jsonObj) { 
    if (!jsonObj || !jsonObj instanceof Object) { 
     return ''; 
    } 
    let table = '<table>'; 
    let head = '<thead><tr>'; 
    let body = '<tbody><tr>'; 
    for(let key in jsonObj) { 
     head += `<th>${key}</th>`; 
     body += `<td>${jsonObj[key]}</td>`; 
    } 
    head += '</tr></thead>'; 
    body += '</tr></tbody>'; 
    table += `${head}${body}</table>`; 
    return table; 
} 

：

$('body').append(createTable({ 
    "name":"John", 
    "age":30, 
    "cars":"Ford" 
})); 

さて、あなたはあなたのテーブルのスタイルをCSSを使用することができますしかし、あなたが好き。例としてcodepenがあります。