javascript - REACT - 遍历具有多个数组的 Json 对象

Question

我目前正在从以下示例 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>  
      )
    }
  }

显示输出只是为了查看它是否被正确迭代，所以我可以继续切换案例，但显然有些地方不对。

Answer 1

您需要遍历区域对象键，然后进入 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);