使用javascript從json對象動態添加數據行？

我有一個JSON文件在我的網站項目，如：使用javascript從json對象動態添加數據行？

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

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

這是樣本數據，它有4個列，但我不知道我的JSON數據，我會得到，將有多少個列。我試圖從這個json數據創建一個動態的html表。這是代碼我現在已經寫：

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

上面的代碼工作，我面臨的問題，當我嘗試插入數據行，下面是針對未使用的代碼：

  //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>

請幫助我。謝謝

來源

2017-05-28 Mogli

你爲什麼不使用jQuery來建立你的桌子嗎？使用'$（「

」）.append（「」）.append（「」）這樣的事情會更容易一些。順便說一句，如果你想給它一個Angular和一個簡單的ngRepeat，去代替jQuery。 –

感謝您的建議@JeremyThille，讓我看到它與角js。 – Mogli

@JeremyThille我跟着這個鏈接https://spring.io/guides/gs/consuming-rest-angularjs/，但在這個鏈接，他們正在創建一個HTML表，因爲他們知道json響應中的列名，有沒有什麼辦法獲得列數和名稱動態？ – Mogli

回答

正在訪問的單元格數據的方式是錯誤的。例如，要訪問第一個對象的id，您必須執行data[0]["id"]，而代碼嘗試執行data[0][0]。工作代碼的例子：

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>

來源

2017-05-28 07:05:01

根據我可以解釋的，你可以做到這一點。訪問數組內的每個對象，然後使用鍵映射值。

但是，作爲示例代碼和提供的數據編寫的內容看起來有所不同。

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>

來源

2017-05-28 07:03:21

相關問題