2017-12-22 98 views
5

Tôi đang cố gắng chuyển đổi dữ liệu JSON lồng nhau thành một bảng HTML, nhưng nó vẫn giữ lỗi.Chuyển đổi dữ liệu JSON lồng nhau thành một bảng

Tôi không chắc mình đã làm gì sai. Có thể có gì đó sai với phương pháp truy cập mảng bên trong đối tượng?

Nó giữ ném lỗi này:

"Cannot set property 'innerHTML' of null"

Dưới đây là đoạn code tôi đã viết:

function DonutTable(array){ 
    //create a table element 
    var table = document.createElement("table"); 
    //create header columns 

    var col = Object.keys(array[0]); //array of keys 
    //write keys onto the header cell 
    var tr = table.insertRow(-1); 
    col.forEach(function(key){ 
     var th = document.createElement("th"); 
     th.textContent = key; 
     tr.appendChild(th); 
    }); 

    //create rows to hold the rest of the data 
    array.forEach(function(obj){ 
     //for each obj in the main array, create a row 
     var data_row = table.insertRow(-1); 
     //for each header in the col array, populate data 
     col.forEach(function(key){ 
      var tabCell = data_row.insertCell(-1); 
      if (key==="batters"){ 
       //grab the value of batters and access value of batter 
       obj["batters"]["batter"].forEach(function(e){ 
        //for each e in batter, create a div element 
        var div = document.createElement("div"); 
        //write on the div 
        div.textContent = e.type + "(" + e.id + ")"; 
        tabCell.appendChild(div); }) 
       } 
      if (Array.isArray(obj[key])){ //check if a value of a key is an array 
       obj[key].forEach(function(topping){ 
        //for each obj in topping, get id and type 
        var div = document.createElement("div"); 
        div.textContent = topping.type + "(" + topping.id + ")"; 
        tabCell.appendChild(div); 
       }) 
      } 
      else{ 
       tabCell.textContent = obj[key]; 
      } 


       }) 
      }) 


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

} 

var donut = [ 
    { 
     "id": "0001", 
     "type": "donut", 
     "name": "Cake", 
     "ppu": 0.55, 
     "batters": 
      { 
       "batter": 
        [ 
         { "id": "1001", "type": "Regular" }, 
         { "id": "1002", "type": "Chocolate" }, 
         { "id": "1003", "type": "Blueberry" }, 
         { "id": "1004", "type": "Devil's Food" } 
        ] 
      }, 
     "topping": 
      [ 
       { "id": "5001", "type": "None" }, 
       { "id": "5002", "type": "Glazed" }, 
       { "id": "5005", "type": "Sugar" }, 
       { "id": "5007", "type": "Powdered Sugar" }, 
       { "id": "5006", "type": "Chocolate with Sprinkles" }, 
       { "id": "5003", "type": "Chocolate" }, 
       { "id": "5004", "type": "Maple" } 
      ] 
    }, 
    { 
     "id": "0002", 
     "type": "donut", 
     "name": "Raised", 
     "ppu": 0.55, 
     "batters": 
      { 
       "batter": 
        [ 
         { "id": "1001", "type": "Regular" } 
        ] 
      }, 
     "topping": 
      [ 
       { "id": "5001", "type": "None" }, 
       { "id": "5002", "type": "Glazed" }, 
       { "id": "5005", "type": "Sugar" }, 
       { "id": "5003", "type": "Chocolate" }, 
       { "id": "5004", "type": "Maple" } 
      ] 
    }, 
    { 
     "id": "0003", 
     "type": "donut", 
     "name": "Old Fashioned", 
     "ppu": 0.55, 
     "batters": 
      { 
       "batter": 
        [ 
         { "id": "1001", "type": "Regular" }, 
         { "id": "1002", "type": "Chocolate" } 
        ] 
      }, 
     "topping": 
      [ 
       { "id": "5001", "type": "None" }, 
       { "id": "5002", "type": "Glazed" }, 
       { "id": "5003", "type": "Chocolate" }, 
       { "id": "5004", "type": "Maple" } 
      ] 
    } 
] 
DonutTable(donut); 

<html> 
    <head> 
     <title>HTML Donut Table from JSON</title> 
     <script type="text/javascript" src="script.js"></script> 
    </head> 
    <body> 
     <input type="button" value="Generate a table" onclick="DonutTable()"> 
     <div id="showTable"></div> 
    </body> 
</html> 
+0

Nếu đây là mã thực tế của bạn, sau đó bạn có thể cố gắng để truy cập vào phần tử HTML trước khi trang của bạn được trả lại đầy đủ. –

Trả lời

2

Trong Chrome, thiết lập một breakpoint ngay sau khi bạn khai báo divContainer của bạn. Dựa trên mã, có vẻ như divContainer là null vì bạn đang chạy JavaScript trước khi HTML ở trên trang. Di chuyển JS vào một hàm document.ready hoặc di chuyển phần script xuống bên dưới HTML.

+0

Cảm ơn bạn. Bảng của tôi hiển thị ngay bây giờ. Nhưng phần batters không hiển thị chính xác. Nó cho thấy [Object, Object], có nghĩa là có cái gì đó sai với vòng forEach mà tôi sử dụng để truy cập mảng bên trong đối tượng. – ChuChu

2

Đây là mã chính xác của bạn mà tôi chỉ chia thành các phần JS và HTML.

Nó hoạt động khi chạy ban đầu kể từ khi donut mảng được chuyển rõ ràng đến hàm DonutTable(). Nó không hoạt động khi nhấp vào nút vì HTML của bạn gọi DonutTable() không có tham số.

function DonutTable(array){ 
 
    //create a table element 
 
    var table = document.createElement("table"); 
 
    //create header columns 
 

 
    var col = Object.keys(array[0]); //array of keys 
 
    //write keys onto the header cell 
 
    var tr = table.insertRow(-1); 
 
    col.forEach(function(key){ 
 
     var th = document.createElement("th"); 
 
     th.textContent = key; 
 
     tr.appendChild(th); 
 
    }); 
 

 
    //create rows to hold the rest of the data 
 
    array.forEach(function(obj){ 
 
     //for each obj in the main array, create a row 
 
     var data_row = table.insertRow(-1); 
 
     //for each header in the col array, populate data 
 
     col.forEach(function(key){ 
 
      var tabCell = data_row.insertCell(-1); 
 
      if (key==="batters"){ 
 
       //grab the value of batters and access value of batter 
 
       obj["batters"]["batter"].forEach(function(e){ 
 
        //for each e in batter, create a div element 
 
        var div = document.createElement("div"); 
 
        //write on the div 
 
        div.textContent = e["type"] + "(" + e["id"] + ")"; 
 
        tabCell.appendChild(div); }) 
 
       } 
 
      else if (Array.isArray(obj[key])){ //check if a value of a key is an array 
 
       obj[key].forEach(function(topping){ 
 
        //for each obj in topping, get id and type 
 
        var div = document.createElement("div"); 
 
        div.textContent = topping.type + "(" + topping.id + ")"; 
 
        tabCell.appendChild(div); 
 
       }) 
 
      } 
 
      else{ 
 
       tabCell.textContent = obj[key]; 
 
      } 
 

 

 
       }) 
 
      }) 
 

 

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

 
} 
 

 
var donut = [ 
 
    { 
 
     "id": "0001", 
 
     "type": "donut", 
 
     "name": "Cake", 
 
     "ppu": 0.55, 
 
     "batters": 
 
      { 
 
       "batter": 
 
        [ 
 
         { "id": "1001", "type": "Regular" }, 
 
         { "id": "1002", "type": "Chocolate" }, 
 
         { "id": "1003", "type": "Blueberry" }, 
 
         { "id": "1004", "type": "Devil's Food" } 
 
        ] 
 
      }, 
 
     "topping": 
 
      [ 
 
       { "id": "5001", "type": "None" }, 
 
       { "id": "5002", "type": "Glazed" }, 
 
       { "id": "5005", "type": "Sugar" }, 
 
       { "id": "5007", "type": "Powdered Sugar" }, 
 
       { "id": "5006", "type": "Chocolate with Sprinkles" }, 
 
       { "id": "5003", "type": "Chocolate" }, 
 
       { "id": "5004", "type": "Maple" } 
 
      ] 
 
    }, 
 
    { 
 
     "id": "0002", 
 
     "type": "donut", 
 
     "name": "Raised", 
 
     "ppu": 0.55, 
 
     "batters": 
 
      { 
 
       "batter": 
 
        [ 
 
         { "id": "1001", "type": "Regular" } 
 
        ] 
 
      }, 
 
     "topping": 
 
      [ 
 
       { "id": "5001", "type": "None" }, 
 
       { "id": "5002", "type": "Glazed" }, 
 
       { "id": "5005", "type": "Sugar" }, 
 
       { "id": "5003", "type": "Chocolate" }, 
 
       { "id": "5004", "type": "Maple" } 
 
      ] 
 
    }, 
 
    { 
 
     "id": "0003", 
 
     "type": "donut", 
 
     "name": "Old Fashioned", 
 
     "ppu": 0.55, 
 
     "batters": 
 
      { 
 
       "batter": 
 
        [ 
 
         { "id": "1001", "type": "Regular" }, 
 
         { "id": "1002", "type": "Chocolate" } 
 
        ] 
 
      }, 
 
     "topping": 
 
      [ 
 
       { "id": "5001", "type": "None" }, 
 
       { "id": "5002", "type": "Glazed" }, 
 
       { "id": "5003", "type": "Chocolate" }, 
 
       { "id": "5004", "type": "Maple" } 
 
      ] 
 
    } 
 
] 
 
DonutTable(donut);
<html> 
 
    <head> 
 
     <title>HTML Donut Table from JSON</title> 
 
     <script type="text/javascript" src="script.js"></script> 
 
    </head> 
 
    <body> 
 
     <input type="button" value="Generate a table" onclick="DonutTable()"> 
 
     <div id="showTable"></div> 
 
    </body> 
 
</html>

+0

Cảm ơn bạn. Mỏ giờ cũng hoạt động. Nhưng có gì đó sai với cột "batters". Tôi truy cập vào mảng bên trong đối tượng, được sử dụng forEach để lặp qua từng obj trong mảng và viết nó ra, nhưng nó vẫn cho thấy: [object Object]. Bạn có biết tại sao? – ChuChu

+0

Vui lòng xem nhận xét của tôi trong mã. –

+0

Cảm ơn bạn nhưng nếu tôi không sử dụng câu lệnh khác, thì các cột khác sẽ không được điền vào – ChuChu

Các vấn đề liên quan