带对象和数组的嵌套JSON，查找值

我正在构建一个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'));

var-App=React.createClass({
getInitialState:函数（）{
返回{
结果：{}
}
},
componentDidMount（）{
fetch（请求\ URL）//从API获取，返回JSON
.then（res=>res.json（））
.then（数据=>{this.setState(
{结果：data.people}
);
})
},
renderResult:函数（键）{
回来
},
render:function（）{
返回(

{Object.keys（this.state.results）.map（this.renderResult）}

)
}
});
var Result=React.createClass({
render:function（）{
返回(

{this.props.details.email}

)
}
});
ReactDOM.render（App、document.querySelector（“#App”）；

但是，现在我需要输出“photo”，但只输出“type”：“house”。我试过了，但运气不好，我很清楚这是远远不够的。我对处理JSON数据和React非常陌生，谷歌甚至在几个小时试图解决这个问题后都没有帮助我

.address

属性不是一个对象，而是一个对象数组

.type

不能直接在

上使用。地址

：

---

解决方案：

您可以使用

.address

上的Array.prototype.filter来获取具有属性

类型

且其值为“house”的对象数组：

在这里，houseAddress将是一个对象数组，其

类型

值为“house”

然后，您可以使用

for

或在数组中循环创建相关的JSX。以下示例使用数组#映射：

const houseImgTags=houseAddresses.map（函数（房屋，索引）{
返回(
);
});

（此处添加了一个密钥，以防

房屋

对象有多个实例）

您只需编写即可。

---

基本上，这会比较address.type是否为house，然后返回相应的结果。

啊，我知道你在做什么，但我无法真正让它工作。在尝试编译代码时出现错误。这会记录所有对象：

var housedAddresses=this.props.details.address；

这会导致编译错误：

var houseAddresses=this.props.details.address.filter（（value）{value.type==“house”}）；

@dilla:在声明传递给筛选器的函数时需要

函数的关键字：
this.state.results.people.address.filter（函数（value）{return value.type==“house”}）
啊，这就解决了，很酷，谢谢你的帮助！虽然我还没有完全做到，但我无法在我的组件中实现它，该组件可以呈现所有信息，如电子邮件和街道。如果你有时间并且愿意，我只想问你是否可以私下检查我的代码？大约有70行。你删除所选答案的原因是什么注意？对不起，我弄错了！此.states.results.address上没有
type
属性，它是一个包含具有
type
属性的对象的数组
this.state.results.people.address.type
//  .type property doesn't exist on array

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

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