Javascript 通过本地JSON文件中的数据循环以HTML格式输出_Javascript_Jquery_Json_Xmlhttprequest

Javascript 通过本地JSON文件中的数据循环以HTML格式输出

javascript jquery json

Javascript 通过本地JSON文件中的数据循环以HTML格式输出,javascript,jquery,json,xmlhttprequest,Javascript,Jquery,Json,Xmlhttprequest,下面是示例JSON数据 { "elements" : [{ "name": "Hydrogen", "symbol": "H", "number": 1, "period": 1, "category": "diatomic nonmetal ", "atomic_mass": 1.008, }] } 下面是我为显示数据而编写的代码 $(function(){ var btn = $('button'); btn.on('click',

下面是示例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]中手动插入I的值都能很好地工作。

您获得的元素不是数组，只是一个具有一个包含数组的字段的对象，这就是您的循环失败的原因。你必须通过元素循环。试试这个

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数据。以下是console返回的内容-Uncaught TypeError：无法读取Undefineds的属性“name”，因为你的JSON无效，你能不能将console.logelem放在这一行var elem=JSON.parsethis.responseText之后；并将记录的数据发布到这里。它是有效的，它返回数组。只需将整个elem变量数据发布到这里。我尝试过I

[jquery]相关文章推荐

随机文章推荐