在反应组件中迭代json

Question

我在我的react组件中有这个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>
    );
  }

Answer 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'/>