私はオブジェクトの配列をループしてテーブルに移入しようとしています

Question

質問1 - 私はjson配列を通して単純なループを行い、配列内のオブジェクトごとに新しい行を作成しようとしています。何らかの理由で私は理解できません。配列の最後のオブジェクトをDOMに印刷するだけです。だから私はすべてが正しく接続されていることを知っている、私はちょうどなぜ1つのオブジェクトが表示されているのか分からない。

私はインターネット上でこれと同様の他の投稿があることを知っています。私はちょうど私の正確な問題を理解することに問題があります。

質問2 - 私は私の関数の中で初期var row = table.insertRow(-1);を入れしようとした場合、私はエラーコンソールで

"cannot read property insertRow of undefined"

を得るが、それは私の関数の外だ場合、私はエラーを取得しないでください。 GenerateTable（）内にあれば、私の関数はまだそれにアクセスすることができるだろうと思った？

var table_data = [{ 
 
    first_name: 'Zoe', 
 
    last_name: 'Heriot', 
 
    home: 'Space Station W3' 
 
}, { 
 
    first_name: 'Jo', 
 
    last_name: 'Grant', 
 
    home: 'Earth' 
 
}, { 
 
    first_name: 'Clara', 
 
    last_name: 'Oswald', 
 
    home: 'Earth' 
 
}, { 
 
    first_name: 'Adric', 
 
    last_name: null, 
 
    home: 'Alzarius' 
 
}, { 
 
    first_name: 'Susan', 
 
    last_name: 'Foreman', 
 
    home: 'Gallifrey' 
 
}]; 
 

 

 
var row = table.insertRow(-1); 
 

 
function GenerateTable() { 
 

 
    var table = document.getElementById('table')[1]; 
 
    for (var i = 0; i <= table_data.length; i++) { 
 

 
     var firstName = table_data[i].first_name; 
 
     var lastName = table_data[i].last_name; 
 
     var home = table_data[i].home; 
 

 
     row.innerHTML = ` 
 
    <td>${firstName}</td> 
 
    <td>${lastName}</td> 
 
    <td>${home}</td> 
 
`; 
 
    }; 
 
}; 
 

 
if (document.attachEvent ? document.readyState === "complete" : 
 
    document.readyState !== "loading") { 
 
    GenerateTable(); 
 
} else { 
 
    document.addEventListener('DOMContentLoaded', GenerateTable); 
 
}

<table id="table"> 
 
    <tr> 
 
     <th>First Name</th> 
 
     <th>Last Name</th> 
 
     <th>Home</th> 
 
    </tr> 
 
</table>

Answer 1

いくつかのこと：

あなたはそれを定義する前に、変数にアクセスすることはできません。あなたがそれを使用することはできませんので、あなたはそれが何であるかはJavaScriptを言ったまで

var row = table.insertRow(-1); 

tableは、関数の内部まで定義されていません：スクリプトの最初の行は、あなたがエラーを取得する理由である、これを行います。さらに、ループを通過するたびに行を追加したいので、ループの中にinsertRow()コールを入れて、毎回行を追加する必要があります。

また、i < table_data.lengthがでないときに停止したいループがある場合は、最後のトリップスルーでエラーが発生します。あなたがテーブルにのみ単一の行を挿入する

var table_data =[{ first_name : 'Zoe', 
 
       last_name : 'Heriot', 
 
       home : 'Space Station W3'}, 
 
       { first_name : 'Jo', 
 
       last_name : 'Grant', 
 
       home : 'Earth'}, 
 
       { first_name : 'Clara', 
 
       last_name : 'Oswald', 
 
       home : 'Earth'}, 
 
       { first_name : 'Adric', 
 
       last_name : null, 
 
       home : 'Alzarius'}, 
 
       { first_name : 'Susan', 
 
       last_name : 'Foreman', 
 
       home : 'Gallifrey'} ]; 
 

 
function GenerateTable(){ 
 
    var table = document.getElementById('table'); 
 
    for (var i=0; i < table_data.length; i++) { 
 
     var row = table.insertRow(-1); 
 

 
     var firstName = table_data[i].first_name; 
 
     var lastName = table_data[i].last_name; 
 
     var home = table_data[i].home; 
 

 
     row.innerHTML = ` 
 
     <td>${firstName}</td> 
 
     <td>${lastName}</td> 
 
     <td>${home}</td> 
 
     `; 
 
    }; 
 
}; 
 
GenerateTable()

tr:nth-child(even) { 
 
     background: #ccdced; 
 
    } 
 
td, th { 
 
    padding:.5em 
 
    }

<table id="table"> 
 
    <tr> 
 
     <th>First Name</th> 
 
     <th>Last Name</th> 
 
     <th>Home</th> 
 
    </tr> 
 
</table>

Answer 2

質問1：

row.innerHTML = ` <td>${firstName}</td> <td>${lastName}</td> <td>${home}</td> `; 

は row.innerHTMLのすべてを削除し、 <td>$...と交換してください」と言っていると row値は変更しないことから、あなたは常に書きます。同じ行に移動します。

質問2：

あなたはtable VaRの定義の後table.insertRow()を入れて、[1]を削除しようとしたことがありますか？同様に：

var table = document.getElementById('table'); 
    var row = table.insertRow(-1); 

あなたはinsertRowについての詳細を読むことができますし、それがどのようにMozilla Developer pagesで使用することができます。