我希望循环访问 API 返回的 JSON 数组[{"a":1},{"b":2},{"c":3},{"d":4}]。如何将 JSON 键和值解析到我的 html 中，以便输出 div 仅给出键和值。<body> <div id = "result" style = "color:green" ></div> <script type = "text/javascript"> $(document).ready(function() { $.ajax({ url: "http://localhost:8080/api/", type: 'GET', dataType: 'json', success: function(res) { console.log(res); //var data=$.parseJSON(res); //var data = JSON.stringify(res) $.each(res, function(key, value) { console.log(key); console.log(value); var para = document.createElement("P"); para.innerHTML = key + ":" + value; document.getElementById("result").appendChild(para); }) } }); }) </script> </body>
2 回答
神不在的星期二
TA贡献1963条经验 获得超6个赞
您正在循环数组，函数将接受参数为item和index：
$.each(array, function(index,item){});
进行二次循环并迭代对象：
$.each(object, function(key,value){});
res = [{
"a": 1
}, {
"b": 2
}, {
"c": 3
}, {
"d": 4
}]
$.each(res, function(index,item) {
$.each(item, function(key,value){
var para = document.createElement("P");
para.innerHTML = key + ":" + value;
document.body.appendChild(para);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
智慧大石
TA贡献1946条经验 获得超3个赞
您的 JSON 格式是一个数组，每个键都是一个对象
[
{"a" : 1},
{"b" : 2},
{"c" : 3},
{"d" : 4}
]
所以这意味着当您循环遍历项目时，将key是数组的索引，并且value将是对象
$.each(res, function(key, value) {
console.log(key); // -> will be 0, 1, 2 etc
console.log(value); // -> will be {"a" : 1}, {"b" : 2}, etc
});
因此有 2 个选项，您可以更改 API 以返回带有键：值对的单个对象，如下所示
{
"a" : 1,
"b" : 2,
"c" : 3,
"d" : 4
}
或者您需要在代码中添加一个额外的循环，以便您可以循环遍历对象并显示值（尽管我建议您选择第一个选项
$.ajax({
url: "http://localhost:8080/api/",
type: 'GET',
dataType: 'json',
success: function(res) {
$.each(res, function(key, object) {
$.each(object, function(key, value) {
var para = document.createElement("P");
para.innerHTML = key+ ":" +value;
document.getElementById("result").appendChild(para);
});
});
}
});
- 2 回答
- 0 关注
- 105 浏览
添加回答
举报
0/150
提交
取消