Question

我目前正在从以下示例网址中获取json对象： https://demo0046512.mockable.io/stream/anycontent

我的目的是遍历每个数组（＆＃34; zone＆＃34;）并创建一个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数组以收集不同类型，然后删除重复项。

＆＃13;

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);

＆＃13;

REACT - 使用多个数组迭代Json对象

1 个答案: