![](/img/trans.png)
[英]The index of a JS object returns all values in object rather than the actual index
[英]getJSON displays [object Object] rather than actual values
我有一個JSON,我需要獲取此JSON並將其作為ul列表放入html中。 它獲取值作為對象,並在html中顯示[object Object]。 如果我修改json,則可以正常工作。 所以我的腳本中可能出了點問題,我無法正確遍歷json文件。 可以幫忙一下嗎:
我的JSON是:
[
{
"us":"USA"
},
{
"fr":"FRANCE"
},
{
"es":"Spain"
},
{
"sa":"South Africa"
}
]
和JS是
<script>
$.getJSON('jsonfile', function(data) {
var items = [];
$.each(data ,function(key,val) {
items.push('<li id="'+ key +'">' + val +'</li>');
});
$('<ul />' , {
'class':'new-div',
html:items.join('')
}).appendTo('body');
});
</script>
JSON更新:
[
{
"items":
{
"item":
[
{
"id": "0001",
"type": "donut",
"name": "Cake",
"ppu": 0.55,
"batters":
{
"batter":
[
{ "id": "1001", "type": "Regular" },
{ "id": "1002", "type": "Chocolate" },
{ "id": "1003", "type": "Blueberry" },
{ "id": "1004", "type": "Devil's Food" }
]
},
"topping":
[
{ "id": "5001", "type": "None" },
{ "id": "5002", "type": "Glazed" },
{ "id": "5005", "type": "Sugar" },
{ "id": "5007", "type": "Powdered Sugar" },
{ "id": "5006", "type": "Chocolate with Sprinkles" },
{ "id": "5003", "type": "Chocolate" },
{ "id": "5004", "type": "Maple" }
]
}
]
}
}
]
您要遍歷的data
是具有對象的數組。 所以,你的key
將是0
, 1
,等等,和val
將在數組中的位置的對象 。
JSON結構實際上使輸出有些麻煩,因為每個對象只有一個屬性,但是屬性名稱因對象而異。 您可以通過遍歷對象屬性(即使只有其中之一) 來做到這一點:
var items = [];
$.each(data ,function(outerKey, outerVal) { // <== Loops through the array
$.each(outerVal, function(key, val) { // <== "Loops" through each object's properties
items.push('<li id="'+ key +'">' + val +'</li>');
});
});
...但是我將改為更改JSON結構。 例如,假設鍵是唯一的,則原始代碼將使用以下結構:
{
"us":"USA",
"fr":"FRANCE",
"es":"Spain",
"sa":"South Africa"
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.