Hinzufügen von Datenzeilen dynamisch von einem Json-Objekt mit Javascript?

Ich habe eine JSON-Datei in meiner Website-Projekt, wie folgt aus:Hinzufügen von Datenzeilen dynamisch von einem Json-Objekt mit Javascript?

[ 
    { 
"id": "1", 
"name": "ramesh", 
"phone": "12345", 
"salary": "50000" 
    }, 

    { 
"id": "2", 
"name": "suresh", 
"phone": "123456", 
"salary": "60000" 
    } 
]

Hier die Beispieldaten ist, hat es vier Spalten, aber ich weiß nicht, dass meine Json-Daten, die ich bekommen, haben wie viele Anzahl von Spalten. Ich versuche, eine dynamische HTML-Tabelle aus diesen JSON-Daten zu erstellen. Dies ist der Code, den ich jetzt schreiben:

<script> 
    $(document).ready(function() { 
     var jsonitems = []; 
     $.getJSON("json.json", function (data) { 
      var totalColumns = Object.keys(data[0]).length; 
      var columnNames = []; 
      columnNames = Object.keys(data[0]); 

      //Create a HTML Table element. 
      var table = document.createElement("TABLE"); 
      table.border = "1"; 

      //Add the header row. 
      var row = table.insertRow(-1); 
      for (var i = 0; i < totalColumns; i++) { 
       var headerCell = document.createElement("TH"); 
       headerCell.innerHTML = columnNames[i]; 
       row.appendChild(headerCell); 
      }

obige Code funktioniert, ich bin vor Problem, wenn ich versuche, Datenzeilen einzufügen, unten ist der Code für das, was nicht funktioniert:

  //Add the data rows. 
      //for (var i = 1; i < data.length; i++) { 
      // row = table.insertRow(-1); 
      // for (var j = 0; j < totalColumns; j++) { 
      //  var cell = row.insertCell(-1); 
      //  cell.innerHTML = customers[i][j]; 
      // } 
      //} 

      var dvTable = document.getElementById("dvTable"); 
      dvTable.innerHTML = ""; 
      dvTable.appendChild(table); 
     }); 
    }); 
</script>

Bitte helfen Sie mir dabei. Dank

Quelle

2017-05-28 Mogli

Warum Sie nicht verwenden jQuery Tisch zu bauen? Es wäre einfacher mit etwas wie $ ("

") .append ("") .append ("") "BTW das ist so einfach mit Angular und einem einfachen ngRepeat zu tun, wenn Sie es geben wollen gehe statt jQuery. –

danke für deinen Vorschlag @ JeremyThille, lass es mich mit eckigen js sehen. – Mogli

@ JeremyThille Ich folge diesem Link https://spring.io/guides/gs/consuming-rest-angularjs/ aber in diesem Link erstellen sie eine HTML-Tabelle, da sie die Spaltennamen in JSON Antwort wissen, gibt es keine Möglichkeit um die Anzahl der Spalten und deren Namen dynamisch zu bekommen? – Mogli

Antwort

Die Art und Weise Sie die Zellendaten zugreifen, ist falsch. Um zum Beispiel auf id des ersten Objekts zuzugreifen, müssen Sie data[0]["id"] ausführen, stattdessen versucht Ihr Code data[0][0]. Arbeitsbeispiel des Codes:

var data = [{ 
 
    "id": "1", 
 
    "name": "ramesh", 
 
    "phone": "12345", 
 
    "salary": "50000" 
 
    }, 
 

 
    { 
 
    "id": "2", 
 
    "name": "suresh", 
 
    "phone": "123456", 
 
    "salary": "60000" 
 
    } 
 
]; 
 
var totalColumns = Object.keys(data[0]).length; 
 
var columnNames = []; 
 
columnNames = Object.keys(data[0]); 
 

 
//Create a HTML Table element. 
 
var table = document.createElement("TABLE"); 
 
table.border = "1"; 
 

 
//Add the header row. 
 
var row = table.insertRow(-1); 
 
for (var i = 0; i < totalColumns; i++) { 
 
    var headerCell = document.createElement("TH"); 
 
    headerCell.innerHTML = columnNames[i]; 
 
    row.appendChild(headerCell); 
 
} 
 

 
// Add the data rows. 
 
for (var i = 0; i < data.length; i++) { 
 
    row = table.insertRow(-1); 
 
    columnNames.forEach(function(columnName) { 
 
    var cell = row.insertCell(-1); 
 
    cell.innerHTML = data[i][columnName]; 
 
    }); 
 
} 
 

 
var dvTable = document.getElementById("dvTable"); 
 
dvTable.innerHTML = ""; 
 
dvTable.appendChild(table);

<div id="dvTable"></div>

Quelle

2017-05-28 07:05:01

Basierend auf was ich interpretieren kann, können Sie dies tun. Greifen Sie auf jedes Objekt innerhalb des Arrays zu und verwenden Sie dann die Tasten, um Ihre Werte zuzuordnen.

Aber was Sie geschrieben haben, wie Ihr Beispielcode und Ihre bereitgestellten Daten scheint anders.

let data = [ 
 
    { 
 
"id": "1", 
 
"name": "ramesh", 
 
"phone": "12345", 
 
"salary": "50000" 
 
    }, 
 

 
    { 
 
"id": "2", 
 
"name": "suresh", 
 
"phone": "123456", 
 
"salary": "60000" 
 
    } 
 
]; 
 

 
var table = document.getElementById("table"); 
 

 
for (let item of data) { 
 
    row = table.insertRow(-1); 
 
    for (let key in item) { 
 
     var cell = row.insertCell(-1); 
 
     cell.innerHTML = item[key]; 
 
    } 
 
}

<table id="table"> 
 
</table>

Quelle

2017-05-28 07:03:21

Verwandte Themen