2017-12-22 27 views
5

Próbuję konwertować zagnieżdżone dane JSON na tabelę HTML, ale nadal występował błąd rzucania.Konwertowanie zagnieżdżonych danych JSON na tabelę

Nie jestem pewien, gdzie popełniłem błąd. Może coś jest nie tak z metodą dostępu do tablicy wewnątrz obiektu?

on rzucał ten błąd:

"Cannot set property 'innerHTML' of null"

Poniżej jest kod I napisał:

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

Jeśli jest to rzeczywisty kod, to może próbować uzyskać dostęp do elementu HTML, zanim strona jest w pełni renderowane. –

Odpowiedz

2

W Chrome ustawić punkt przerwania zaraz po zadeklarować swój divContainer. Na podstawie kodu wygląda na to, że divContainer ma wartość null, ponieważ JavaScript jest uruchamiany przed kodem HTML na stronie. Przenieś JS do document.ready już wpisz funkcję lub przenieś sekcję skryptu poniżej kodu HTML.

+0

Dziękuję. Mój stół pokazuje teraz. Ale sekcja z farszami nie wyświetla się poprawnie. Pokazuje [Object, Object], co oznacza, że ​​coś jest nie tak z pętlą forEach, której używam do uzyskania dostępu do tablicy wewnątrz obiektu. – ChuChu

2

To jest twój dokładny kod, który właśnie podzieliłem na części JS i HTML.

Działa po pierwszym uruchomieniu, ponieważ donut jest jawnie przekazywana do funkcji DonutTable(). Nie działa on po kliknięciu przycisku, ponieważ twoje wywołania HTML DonutTable() bez parametrów.

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

Dziękuję. Mój działa również teraz. Ale coś jest nie tak z kolumną "batony". Uzyskałem dostęp do tablicy wewnątrz obiektu, użyłem go, aby przejrzeć każdy obiekt w tablicy i napisałem go, ale nadal pokazywał: [obiekt obiekt]. Wiesz dlaczego? – ChuChu

+0

Proszę zobaczyć mój komentarz w kodzie. –

+0

Dziękuję, ale jeśli nie używam instrukcji else, to inne kolumny nie zostaną wypełnione – ChuChu

Powiązane problemy