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

});

问题 - ＆gt;

我遇到for循环或任何循环的问题，w / o循环并在i中手动插入elements[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);
    }
}

将本地JSON文件中的数据循环到HTML中输出

1 个答案: