在反应组件中迭代 json答案

【问题标题】：Iterate on json in react component在反应组件中迭代 json
【发布时间】：2017-08-15 15:12:19
【问题描述】：

我的反应组件中有这个 json 为 codeData

 {
   "type":"Simple count",
   "codeCount": {
    "lang": {
      "java": 4,
      "cpp":3,
      "c":5
    },
    "ds": {
      "array": 4,
      "tree":5
    }
   }
  }

在页面中我想以列表的形式显示上面的json，如下所示。

 lang
  *java(4)
  *cpp(3)
  *c(5)

  ds
  *array(4)
  *tree(5)

为此，我必须遍历 java 对象 codeData.codeCount。但我无法弄清楚如何在循环中显示键和值。

 class Showdata extends Component {

  render() {
    const {codeData} = this.props;
    return (
      <div>
      for (let [key, value] of {codeData.codeCount}(myObj)) {
      <ul>

      </ul>

        }


      </div>
    );
  }

【问题讨论】：

标签： javascript json html reactjs ecmascript-6

【解决方案1】：

检查一下：

let data = {
   "type":"Simple count",
   "codeCount": {
    "lang": {
      "java": 4,
      "cpp":3,
      "c":5
    },
    "ds": {
      "array": 4,
      "tree":5
    }
   }
  }
class Showdata extends React.Component {

  render() {
    const {codeCount} = data;
    return (
      <div>
        {Object.keys(codeCount).map(key=>{
            return <ul>
                    {key}
                    {
                        Object.keys(codeCount[key]).map(el=> <li>{el} : {codeCount[key][el]}</li>)
                    }
                   </ul>
        })}
      </div>
    );
  }
 }
 ReactDOM.render(<Showdata/>, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id='app'/>

【讨论】：