Erhalten Sie Schlüssel/Wert von JSON Array von Objekten, ohne den Schlüssel Namen zu kennen

Question

Ich versuche, eine HTML-Tabelle mit Daten aus einer JSON strukturierten Array zu bauen, wie:

var myjson = [ 
{"firstName":"John", "lastName":"Doe"}, 
{"firstName":"Anna", "lastName":"Smith"}, 
{"firstName":"Peter","lastName": "Jones"} 
]; 

Ich weiß, dass ich verwenden kann:

aber wie kann ich das gleiche Ergebnis erhalten, wenn ich nicht weiß, wie die Spaltennamen (firstName, lastName) heißen? Wie kann ich die Schlüssel/Werte jedes Objekts im strukturierten JSON-Array durchlaufen?

In jeder Anordnung wird die Anzahl der Elemente in jedem Objekt die gleiche seine

Answer 1

Verwenden Object.keys die keys des object zu bekommen.

Object.keys() Methode liefert eine Array von Strings, die alle enumerable Eigenschaften des gegebenen Objekts darstellen.

Verwenden index von arrayheader der Tabelle kann

var myjson = [{ 
 
    "firstName": "John", 
 
    "lastName": "Doe" 
 
}, { 
 
    "firstName": "Anna", 
 
    "lastName": "Smith" 
 
}, { 
 
    "firstName": "Peter", 
 
    "lastName": "Jones" 
 
}]; 
 
var tbl = "<table>"; 
 
$.each(myjson, function(x, y) { 
 
    var keys = Object.keys(y); 
 
    if (!x) { 
 
    tbl += "<tr>"; 
 
    keys.forEach(function(key) { 
 
     tbl += "<th>" + key + "</th>"; 
 
    }); 
 
    tbl += "</tr>"; 
 
    } 
 
    tbl += "<tr>"; 
 
    keys.forEach(function(key) { 
 
    tbl += "<td>" + y[key] + "</td>"; 
 
    }); 
 
    tbl += "</tr>"; 
 
}); 
 

 
tbl += "</table>"; 
 
$('body').append(tbl);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

Verwendung for...in Schleife.

for(let key in myjson[0]) console.log(key + ' == ' + myjson[0][key]); 

Hier ist, wie Sie Code sollte wie folgt aussieht (siehe JSFiddle auch):

var myjson = [{ 
    "firstName": "John", 
    "lastName": "Doe" 
}, { 
    "firstName": "Anna", 
    "lastName": "Smith" 
}, { 
    "firstName": "Peter", 
    "lastName": "Jones" 
}]; 

var keys = []; 
for(let key in myjson[0]) keys.push(key); 

var tbl = "<table>" 

$.each(myjson, function() { 
    tbl += "<tr>"; 
    for(let index in keys) tbl += '<td>' + keys[index] + '</td>'; 
    tbl += "</tr>"; 
    tbl += "<tr>"; 
    for(let index in keys) tbl += '<td>' + arguments[1][keys[index]] + '</td>'; 
    tbl += "</tr>"; 
}); 

tbl += "</table>"; 

document.body.innerHTML = tbl; 

Answer 3

Sie einfach zu entscheiden, tun dies

 var tbl = "<table>" 
     $.each(myjson, function(x, y) { 
      keys = Object.keys(y); 
      tbl += "<tr>"; 
      $.each(keys, function(i,key){ 
       tbl += "<td>" + key + "</td>"; 
      }) 
      tbl += "</tr><tr>"; 
      $.each(keys, function(i,key){ 
       tbl += "<td>" + y[key] + "</td>"; 
      }) 
      tbl += "</tr>"; 
      }); 
     tbl += "</table>"; 

können Sie weiter zu einer Schleife bringen wenn du willst.

Answer 4

Sie können dies versuchen .. JSFiddle

tbl += "<tr>"; 
         for(var i=0;i<Object.keys(myjson[0]).length; i++) 
      {       
        tbl += "<td>"+Object.keys(myjson[0])[i]+"</td>";        
      } 
      tbl += "</tr>";