So füllen Sie die Datentabelle aus dem JSON-Objekt mit Schlüssel und Wert als Spalten

Question

Normalerweise müssen Sie zum Füllen der Jquery-Datentabelle JSON-Array (Array von JSON-Objekt) Datentabelle zuweisen und jedes Feld mit einer Spalte abbilden. Aber ich habe ein Json-Objekt und ich möchte den gesamten Schlüssel in einer Spalte und den zugehörigen Wert in der nächsten Spalte in derselben Zeile anzeigen.

Für z.B. Probe json: -

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

Ausgabetabelle: -

   Key   Value 

      first-name Tom 
      last-name  Hanks 
      Designation Developer 

Anzahl dieser Schlüssel und Werte können in Zukunft ändern.

Ein einfacher Weg ist, dass ich auf Objekt durchlaufen kann und es in ein Array von Objekten mit zwei Attributen konvertieren und verwenden, um Tabelle zu füllen. Aber ich fragte mich, ob es einen anderen direkten Weg gibt.

Answer 1

Dies scheint für die Beispieldaten zu funktionieren:

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(); 

Es ist wahrscheinlich eine elegantere Lösung, sondern als Rückseite eines Umschlags, was es gut zu funktionieren scheint - wahrscheinlich einen Anruf mit zurück getan werden sollte, Ich denke schon. Sie können sehen, es funktioniert here.

Dies ist ein viel kleineres Verfahren einen Rückruf mit:

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(); 
    } 
});