HTMLをjavascriptからレンダリングして、テーブル行を印刷しようとすると、TypeErrorで動作しません。

Question

学習：hereそれだけで最初に印刷し、

function renderHTML(data) 
{ 
    var htmlString = "<table style='width:100%'><tr><th>Location</th><th>Temperature</th><th>Humidity</th></tr>"; 
    for (i = 0; i < data.length; i++){ 
     console.log(i); 
     htmlString += "<tr><td>"+ data[i].location + "</td><td>" + data[i].temperatureInC + "&deg;C/ " + data[i].temperatureInF + "&deg;F </td> <td> " + data[i].humidity + "</td></tr>"; 
    htmlString += "</table>" 
    console.log(htmlString); 
    sensorDataContainer.insertAdjacentHTML('beforeend', htmlString); 
    } 
} 

が、2つの問題が起こっている

1. を：

   { 
       "arduino": [{ 
        "location": "outdoor", 
        "temperatureInC": "18.30", 
        "temperatureInF": "64.94", 
        "humidity": "61" 
       }, { 
        "location": "drawingRoom", 
        "temperatureInC": "25.10", 
        "temperatureInF": "77.18", 
        "humidity": "40.80" 
       }] 
   } 
   

   とHTMLを印刷するには、この機能を使用した：私は、このセンサデータのHTMLをレンダリングしようとしています反復の項目すなわち屋外です

2. 2番目に以下のエラーが表示されます。

TypeError: null is not an object (evaluating 'sensorDataContainer.insertAdjacentHTML')

ここでは何が起こっているのですか？私は何が欠けていますか？

Answer 1

あなたは正しくforループを閉じていないという理由だけで、あなたが最初の行を見ているまず第一には、代わりにこれを試してみてください。

function renderHTML(data) 
{ 
    var htmlString = "<table style='width:100%'><tr><th>Location</th><th>Temperature</th><th>Humidity</th></tr>"; 
    for (i = 0; i < data.length; i++){ 
     console.log(i); 
     htmlString += "<tr><td>"+ data[i].location + "</td><td>" + data[i].temperatureInC + "&deg;C/ " + data[i].temperatureInF + "&deg;F </td> <td> " + data[i].humidity + "</td></tr>"; 
    } 
    htmlString += "</table>" 
    console.log(htmlString); 

    sensorDataContainer.insertAdjacentHTML('beforeend', htmlString); 
} 

第二に、あなたはそれをintializingせずsensorDataContainerを使用している、あなたが必要です最初に初期化します。

Answer 2

forループの外側の最後の3行を移動する必要があります。

function renderHTML(data) { 
    var htmlString = "<table style='width:100%'><tr><th>Location</th><th>Temperature</th><th>Humidity</th></tr>"; 
    for (i = 0; i < data.length; i++) { 
     console.log(i); 
     htmlString += "<tr><td>"+ data[i].location + "</td><td>" + data[i].temperatureInC + "&deg;C/ " + data[i].temperatureInF + "&deg;F </td> <td> " + data[i].humidity + "</td></tr>"; 
    } 
    htmlString += "</table>"; 
    console.log(htmlString); 
    sensorDataContainer.insertAdjacentHTML('beforeend', htmlString); 
}