jsonオブジェクトのデータテーブルにキーと値をカラムとして取り込む方法

Question

通常、Jqueryデータテーブルを作成するために、Json Array（jsonオブジェクトの配列）にデータテーブルを与え、各フィールドを1つのカラムにマッピングする必要があります。しかし、私は1つのjsonオブジェクトを持っており、同じ列にあるすべてのキーとその次の列の関連する値を表示する必要があります。

サンプルJSON： -

{ 
"first-name": "Tom", 
"last-name": "Hanks", 
"Designation": "Developer" 
} 

出力テーブル： - これらのキーと値の

   Key   Value 

      first-name Tom 
      last-name  Hanks 
      Designation Developer 

数は、将来的に異なる場合があります。

簡単な方法の1つは、オブジェクトをトラバースして、2つの属性を持つオブジェクトの配列に変換して、テーブルを作成することです。 しかし、他の直接的な方法があるかどうか疑問に思っていました。 - おそらく、コールバックを使用して行われるべき

var data = { 
    "first-name": "Tom", 
    "last-name": "Hanks", 
    "Designation": "Developer" 
}; 
var table = $('#example').DataTable({ 
    "columns": [ 
     { 
      "data": "key", 
      "title": "Key" 
     }, 
     { 
      "data": "value", 
      "title": "Value" 
     } 
    ] 
}); 
for(var key in data) { 
    if(data.hasOwnProperty(key)) { 
     table.row.add({ 
      "key": key, 
      "value": data[key] 
     }); 
    } 
} 
table.draw(); 

あり、よりエレガントな解決策は、おそらくですが、うまく動作するようですエンベロープもののバックとして：

Answer 1

これはあなたの例のデータのために働いているようです私は思う。あなたはそれが働いているのを見ることができますhere。

これは、コールバックを使用してはるかに小さい方法である：

var data = { 
    "first-name": "Tom", 
    "last-name": "Hanks", 
    "Designation": "Developer" 
}; 
var table = $('#example').DataTable({ 
    "columns": [{ 
     "data": "key", 
     "title": "Key" 
    },{ 
     "data": "value", 
     "title": "Value" 
    }], 
    "initComplete": function() { 
     this.api().rows.add(JSON.stringify(data).slice(2, -2).split('","').map((c)=>({ 
      "key": c.split('":"')[0], 
      "value": c.split('":"')[1] 
     }))).draw(); 
    } 
});