循环访问本地 JSON 文件中的数据以 HTML 格式输出答案

【问题标题】：Looping through data from local JSON file to output in HTML循环访问本地 JSON 文件中的数据以 HTML 格式输出
【发布时间】：2017-10-15 15:29:54
【问题描述】：

这是示例 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 循环或任何循环有疑问，没有循环和在 elements[i] 中手动插入 i 的值非常有效。

【问题讨论】：

什么是问题或问题，任何错误的输出..你能简短地说，它不是有效的 JSON 数据。
这是控制台返回的内容 - Uncaught TypeError: Cannot read property 'name' of undefined
既然你的json是无效的，你能不能把console.log(elem)放在这一行之后 var elem = JSON.parse(this.responseText);并在此处发布记录的数据。
有效，返回数组
在这里发布您的整个 elem 变量数据。

标签： javascript jquery json xmlhttprequest

【解决方案1】：

您获得的elem 不是一个数组，只是一个具有一个包含数组的字段的对象，这就是您的循环失败的原因。你必须遍历elem.elements。试试这个...

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);
    }
}

【讨论】：

我试过i < elem.elements.length和你做的有什么不同？
这只是我过去读到的一个很好的练习。使用我的选项，您可以避免系统在每次迭代时计算对象的长度（检查i< 条件）。从那以后我就用它了
酷，有道理！