Question

我正在构建一个React应用程序，我有一个非常复杂的JSON文件，我需要在数组中查找并输出对象的某些值。

我试图从我的JSON输出所有人，他们看起来像这样：

people: [
    {
        "id": 1,
        "email": "Sincere@april.biz",
        "address": [
            {
                "street": "Kulas Light",
                "type": "house",
                "attribute": {
                    "sketch": "sketch.jpg",
                    "photo": "photo.jpg"
                }
            },
            {
                "street": "Lorem Ipsum",
                "type": "apartment",
                "attribute": {
                    "sketch": "sketch.jpg",
                    "photo": "photo.jpg"
                }
            }
        ]
    }
]

输出电子邮件没问题，按照这样做：

var App = React.createClass({

getInitialState: function () {
    return {
        results: {}
    }
},
componentDidMount() {
    fetch(REQUEST_URL) // fetch from API, returns JSON
    .then(res => res.json())
    .then(data => {this.setState(
        { results: data.people}
        );
    })
},
renderResult : function(key){
    return <Result key={key} index={key} details={this.state.results[key]}/>
},
render : function() {
    return (
        <ul>
            {Object.keys(this.state.results).map(this.renderResult)}
        </ul>
    )
}
});

var Result = React.createClass({
render : function() {
    return (
      <li>
          {this.props.details.email}

          <img src="{this.props.details.address.type=house.attribute.photo}"/>
      </li>

    )
}
});

ReactDOM.render(App, document.querySelector('#app'));

然而，现在我需要输出＆＃34;照片＆＃34;但仅适用于＆＃34;类型＆＃34;：＆＃34; house＆＃34;。我尝试了这个，但没有运气，很清楚这是关闭的。我是处理JSON数据的新手，而React和谷歌在试图解决这个问题几个小时之后也没有帮助我。

Answer 1

.address属性不是一个对象，而是一个对象数组 .type上无法直接使用.address：

this.state.results.people.address.type
//  .type property doesn't exist on array

<强>解决方案：

您可以在.address上使用Array.prototype.filter来获取具有属性type的对象数组，其值为＆＃34; house＆＃34;：

var houseAddresses = this.state.results.people.address.filter(function(value){
  return value.type === "house";
});

这里，houseAddress将是type值为＆＃39; house＆＃34;的对象数组。

然后，您可以使用for，Array#forEach或Array#map遍历数组以创建相关的JSX。以下示例使用Array＃map：

const houseImgTags = houseAddresses.map(function(house, index){
  return (
    <img
      src={house.attribute.photo}
      key={'house'+index}
    />
  );
});

（如果有house个对象的多个实例，则会添加一个密钥

Answer 2

你可以简单地写 <img src={this.states.results.address.type==="house"?house.attribute.photo : otherwise_photo}/>
基本上这会比较address.type是否为house，然后返回相应的结果。

嵌套有对象和数组的JSON，找到值

2 个答案: