Question

我认为这将是一项简单的任务，但我一整天都在努力，但似乎仍无法解决这个问题。

我收到一个非常大的（多层对象）JSON文件，我存储在我的组件状态，现在我需要在屏幕上呈现该数据。这变得很困难，因为在对象中我还有其他几个也可能包含其他对象的对象。

到目前为止，我正在使用Object.keys(myJSONObject).map(...)来尝试完成它，但是我似乎无法找到一种方法来覆盖所有“子对象”。这是我目前的代码：

render: function(){
       return (

        <div>

            {
                Object.keys(_this.state.content).map(function (key) {
                     if (typeof _this.state.content[key] instanceof Object){
                  //go through all objects and sub-objects???

                        }
                    return <div > Key: {
                        key
                    }, Value: {
                                _this.state.content[key]

                    } </div>;
                })
            }


        </div>
    );
   }

编辑：我应该添加我的对象是_this.state.content

编辑2：这是我想要迭代的对象的示例。请记住，它比这更大。

{ "3.8": [ "Something something" ], 
 "3.2": [ { "Blabla": [ "More things I am saying", "Blablablabal", "Whatever" ] } ],
 "2.9": [ { "Foo": [ "bar", "something something something something", "blablablabalbalbal" ] } ]}

编辑3：这是我在渲染时有点喜欢它的方式：

3.8:
 - Something something
3.2:
 - Blabla:
     - More things I am saying
     - Blablablabal
     - Whatever
2.9:
 -Foo:
     -bar
   ...

Answer 1

以下是我在json文件中处理3层嵌套时编写的代码。

<强> JSON

var a = {
    "parent":{
       "name":"x",
       "child":{
          "name":"y",
          "subchild":{
                "name":"check"
          }
       }
  }
}

<强>迭代

  Object.keys(obj).map(function(key,index){
    let section = obj[key]
    //getting subsections for a single section
    let subSections = section["subsections"] // get you nested object here
    Object.keys(subSections).map(function(subSectionId,key){
      //getting a single sub section
        let subSection=subSections[subSectionId]
      //getting instruments for a sub section
      let  nestedSection = subSection["//key"] //get you next nested object here

         Object.keys(instruments).map(function(instrumentId,key){
                    //operation
                 }
             })
         })
    })
  })

希望它有所帮助。

Answer 2

这就是你的追求：http://codepen.io/PiotrBerebecki/pen/PGjVxW

该解决方案依赖于使用React的可重用组件。它根据您的示例接受不同嵌套级别的对象。您可以进一步调整它以适应更多类型的对象。

const stateObject = {
  "3.8": [ "Something something" ], 
  "3.2": [ { "Blabla": [ "More things I am saying", "Blablablabal", "Whatever" ] } ],
  "2.9": [ { "Foo": [ "bar", "something something something something", "blablablabalbalbal" ] } ]
} 


class App extends React.Component {
  render() { 
    const renderMainKeys = Object.keys(stateObject)
      .map(mainKey => <MainKey mainKey={mainKey} 
                      innerObject={stateObject[mainKey]} />);   

    return (
      <div>
        {renderMainKeys}
      </div>
    );
  }
}


class MainKey extends React.Component {
  render() {
    if (typeof this.props.innerObject[0] === 'string') {
      return (
        <div>
          <h4>{this.props.mainKey}</h4>
          <ul>
            <li>{this.props.innerObject[0]}</li>
          </ul>
        </div>
      );
    }

    const innerObjectKey = Object.keys(this.props.innerObject[0])[0];
    const innerList = this.props.innerObject[0][innerObjectKey];

    return (
      <div key={this.props.mainKey}>
        <h4>{this.props.mainKey}</h4>
        <InnerKey innerObjectKey={innerObjectKey} innerList={innerList}/>
      </div>
    )
  }
}

class InnerKey extends React.Component {  
  render() {
    return (
      <ul>
        <li>{this.props.innerObjectKey}</li>
        <InnerList innerList={this.props.innerList} />
      </ul>
    )
  }
}


class InnerList extends React.Component {   
  render() {
    if (!Array.isArray(this.props.innerList)) {
      return (
        <ul>
          <li>{this.props.innerList}</li>
        </ul>
      );
    }

    const listItems = this.props.innerList.map(function(item, index) {
      return <li key={index}>{item}</li>;
    });

    return (
      <ul>
        {listItems}
      </ul>
    );
  }
}


ReactDOM.render(
  <App />,
  document.getElementById('app')
);

将对象渲染到React组件

2 个答案: