通过从本地JSON文件数据的HTML循环输出

问题描述：

{ 
    "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]完美的作品。

有什么问题或问题，任何错误。 –

以下是控制台返回的内容 - '未捕获的TypeError：无法读取未定义的属性'名称' –

由于您的json无效，您可以将console.log（elem）放在此行之后var elem = JSON.parse（this.responseText）;并在这里发布记录的数据。 –

答

您获得的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); 
    } 
}

我试过'我

这只是我过去阅读的一个很好的练习题。使用我的选项，可以避免系统在每次迭代中计算对象的长度（以检查“我”状况）。我从此使用它 –

很酷，很有道理！ –

通过从本地JSON文件数据的HTML循环输出

相关推荐