我希望循環(huán)訪問 API 返回的 JSON 數(shù)組[{"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個贊
您正在循環(huán)數(shù)組，函數(shù)將接受參數(shù)為item和index：
$.each(array, function(index,item){});
進行二次循環(huán)并迭代對象：
$.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 格式是一個數(shù)組，每個鍵都是一個對象
[
{"a" : 1},
{"b" : 2},
{"c" : 3},
{"d" : 4}
]
所以這意味著當您循環(huán)遍歷項目時，將key是數(shù)組的索引，并且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
}
或者您需要在代碼中添加一個額外的循環(huán)，以便您可以循環(huán)遍歷對象并顯示值（盡管我建議您選擇第一個選項
$.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 關注
- 154 瀏覽
添加回答
舉報
0/150
提交
取消