JS循环ajax结果

Question

我得到的ajax请求结果是：

{
"12":{
"name":"Diana",
"age":"51",
"mid":"562132",
"character":{
"height":"180",
"suffix":" cm",
"prefix":"Heinght in: ",
"ratio":{
"w":"99",
"l":"12"
}
}
},
"13":{
"name":"Rachel",
"age":"32",
"mid":"56547",
"character":{
"height":"1.7",
"suffix":" m",
"prefix":"Height in: ",
"ratio":{
"w":"45",
"l":"1"
}
}
},
"14":{
"name":"Nova",
"age":"34",
"mid":"554666",
"character":{
"price":"11.999",
"suffix":" EUR",
"prefix":"Height in: ",
"ratio":{
"w":"176",
"l":"87"
}
}
}
}

我想循环浏览并为每个项目构建html，这是我的尝试；我尝试了json解析和json字符串，但我得到了未定义的错误或未捕获的语法错误：json中位置1:处的意外标记o

function createHtml(data){
var data = JSON.parse(data);
var html = '<h1>Data:</h1>';

for(var i = 0; i < data.length; i++) {
html += '<div class="item">';
html += '<div class="name">'+data[i].name+'</div>';
html += '</div>';
}
$('#datalist').html(html);
}

Answer 1

您看到的错误是因为您对对象而不是字符串调用JSON.parse()。JSON字符串已经被取消序列化，因此您不需要再次执行该操作。

第二个问题是，您的数据结构是一个对象。要循环通过它，您需要一种将其转换为数组的方法。这可以使用CCD_ 2来实现。

从那里，您可以简单地使用map()根据数组中对象的内容构建HTML字符串。试试这个：

function createHtml(data) {
let html = data.map(arr => `<div class="item"><div class="name">${arr[1].name}</div></div>`).join('');
$('#datalist').html(`<h1>Data:</h1>${html}`);
}
let data = {12:{name:"Diana",age:"51",mid:"562132",character:{height:"180",suffix:" cm",prefix:"Heinght in: ",ratio:{w:"99",l:"12"}}},13:{name:"Rachel",age:"32",mid:"56547",character:{height:"1.7",suffix:" m",prefix:"Height in: ",ratio:{w:"45",l:"1"}}},14:{name:"Nova",age:"34",mid:"554666",character:{price:"11.999",suffix:" EUR",prefix:"Height in: ",ratio:{w:"176",l:"87"}}}};
createHtml(Object.entries(data));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="datalist"></div>