REACT - 使用多个数组遍历 Json 对象答案

【问题标题】：REACT - Iterate through Json object with multiple arraysREACT - 使用多个数组遍历 Json 对象
【发布时间】：2018-08-26 13:52:03
【问题描述】：

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

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

【问题讨论】：

因为您没有返回地图正文内的任何内容，请使用：{arr.map(item => <li>item.type</li> )}
试过了
{item.type}

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