如何使用 jQuery Ajax 成功在 html 上打印邮递员返回的 JSON 数组？
我希望循环访问 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回答
-
神不在的星期二
您正在循环数组，函数将接受参数为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> -
智慧大石
您的 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); }); }); }});
随时随地看视频慕课网APP
相关分类
Html5