html页面怎么循环输出json数据,通过从本地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 += `

Name : ${elem.elements[i].name}

Symbol : ${elem.elements[i].symbol}

Number : ${elem.elements[i].number}

`;

}

$('.data').html(output);

}

}

fetch.send();

}

});

问题 - >

我有一个for循环或任何循环的问题，W/O循环和插入值i手动elements[i]完美的作品。

+0

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

+0

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

+0

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