通過從本地JSON文件數據的HTML循環輸出

Question

這裏的樣本JSON數據

{ 
    "elements" : [{ 
    "name": "Hydrogen", 
    "symbol": "H", 
    "number": 1, 
    "period": 1, 
    "category": "diatomic nonmetal ", 
    "atomic_mass": 1.008, 
    }] 
} 

下面的代碼，我寫了顯示數據

$(function(){ 

var btn = $('button'); 
btn.on('click',load); 

function load(){ 
    var fetch = new XMLHttpRequest(); 

    fetch.open('GET','elements.json',true); 
    fetch.onload = function() { 
     if(this.status == 200) { 
      var elem = JSON.parse(this.responseText); 
      var output = ''; 
      for (var i in elem) { 
       output += ` 
        <div> 
         <p>Name : ${elem.elements[i].name}</p> 
         <p>Symbol : ${elem.elements[i].symbol}</p> 
         <p>Number : ${elem.elements[i].number}</p> 
        </div> 
       `; 
      } 
      $('.data').html(output); 
     } 
    } 
    fetch.send(); 
} 

}); 

問題 - >

我有一個for循環或任何循環的問題，W/O循環和插入值i手動elements[i]完美的作品。

Answer 1

您獲得的elem不是數組，只是一個包含數組的字段的對象，這就是爲什麼您的循環失敗。你必須循環通過elem.elements。 output..can你簡短，它不是有效的JSON數據試試這個...

fetch.onload = function() { 
    if(this.status == 200) { 
     var elem = JSON.parse(this.responseText); 
     var output = ''; 
     for (var i=0, l=elem.elements.length; i<l ; i++) { 
      output += ` 
       <div> 
        <p>Name : ${elem.elements[i].name}</p> 
        <p>Symbol : ${elem.elements[i].symbol}</p> 
        <p>Number : ${elem.elements[i].number}</p> 
       </div> 
      `; 
     } 
     $('.data').html(output); 
    } 
}