我当前正在从以下示例 URL 获取 json 对象: https://demo0046512.mockable.io/stream/anycontent
我的目的是迭代每个数组(“区域”)并创建一个 switch-case,它将根据 type
字段调用不同的方法
我尝试查看其他类似案例 Iterating over JSON in React 但我仍然在努力正确地迭代 json 对象,我做错了什么?
这是迭代代码:
interpretJson(jsonObj){
if(jsonObj){
var arr = [];
Object.keys(jsonObj).map((zone, index) => {
arr.push(jsonObj[zone]);
})
return(
<div>
<p> interpretJson output: </p>
<ul>
{arr.map(item => {
item.type
})
}
</ul>
</div>
)
}
}
显示输出只是为了查看它是否正确迭代,因此我可以继续处理 switch 情况,但显然有些地方不对。
最佳答案
您需要循环区域对象键,然后进入 zone1 和 zone2 数组以收集不同类型,然后删除重复项。
var jsonObj = {
"zones":{
"zone1":[
{"type": "text", "url": "http://pastebin.com/raw/1U5vhVzH", "displaytime": "15"},
{"type": "image", "url": "http://i.imgur.com/FuD18KJ.jpg", "displaytime": "10"},
{"type": "video", "url": "http://techslides.com/demos/sample-videos/small.mp4" }
],
"zone2":[
{"type": "text", "url": "http://pastebin.com/raw/1U5vhVzH", "displaytime": "16"},
{"type": "image", "url": "http://i.imgur.com/FuD18KJ.jpg", "displaytime": "11"},
{"type": "video", "url": "http://techslides.com/demos/sample-videos/small.mp4" }
]
}
}
var arr = [];
Object.keys(jsonObj.zones).forEach((zone, index) => {
jsonObj.zones[zone].forEach((obj, idx) => {
arr.push(obj.type)
})
})
arr = arr.filter((x, i, a) => a.indexOf(x) == i) // remove duplicate entries
console.log(arr);
关于javascript - REACT - 使用多个数组迭代 Json 对象,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49338650/