REACT - итерации по объекту Json с несколькими массивами
В настоящее время я получаю объект json из следующего образца URL: https://demo0046512.mockable.io/stream/anycontent
Моя цель - перебрать каждый массив ("зону") и создать переключатель, который будет вызывать разные методы в зависимости от полей type.
Я попытался посмотреть на этот другой похожий случай Итерация по JSON в 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>
)
}
}
Отображение вывода предназначено только для того, чтобы увидеть, правильно ли он повторяется, поэтому я могу перейти к случаю переключения, но, видимо, что-то не так.
попробовал это и <li> {item.type} </li>, но он все еще не печатает типы ...
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Вам нужно перебрать ключи объектов зон, а затем в массив зоны 1 и 2, чтобы собрать разные типы и после этого удалить дубликаты.
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.info(arr);Совершенно верно, сэр. Итак, моя проблема заключалась в том, что я передавал группу внутренних объектов одновременно с jsonObj [zone] вместо одного за другим?
Рад, что это помогло тебе
потому что вы ничего не возвращаете внутри тела карты, используйте это:
{arr.map(item => <li>item.type</li> )}