javascript - 循环本地 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 循环或任何循环有疑问，没有循环并在 elements[i] 中手动插入 i 的值效果很好。

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