按特定ID过滤数据以在ReactJS中显示

时间:2016-11-25 13:14:50

标签: json api reactjs

我想选择与此特定ID匹配的数据。我做了一个API调用,它给了我这个JSON数据,但我只想要id为eb9fa7e9-3dc9-11e6-a9f9-28e347的数据。如何过滤此数据?

     [
          {
            "food_item_id": "a095eca7-3dcf-11e6-a9f9-28e347",
            "food_group_id": "eb9fa7e9-3dc9-11e6-a9f9-28e347",
            "food_item_name": "Don't know jack"
          },
          {
            "food_item_id": "a09b073d-3dcf-11e6-a9f9-28e347",
            "food_group_id": "ebaeef2c-3dc9-11e6-a9f9-28e347",
            "food_item_name": "Oreo cookie monster"
          },
          {
        "food_item_id": "a180332e-3dcf-11e6-a9f9-28e347",
        "food_group_id": "ab9fa7e9-3dc9-11e6-a9f9-69e8124",
        "food_item_name": "Big Country"                  
      }
        ]

如何按"food_group_id": "eb9fa7e9-3dc9-11e6-a9f9-28e347"过滤:

var canvases = this.state.foodinfo.map(function(data) {
         return (
           <div>
           <Card className="col-xs-12 col-sm-4 eachCard">
             <CardImg top width="100%" src={data.food_item_pic} alt="Card image cap" />
             <CardBlock className="cardBlock">
               <CardTitle>{data.food_item_name}</CardTitle>
               <CardSubtitle>${data.food_item_price}</CardSubtitle>
               <span class="glyphicon glyphicon-plus-sign btnClass"></span>
             </CardBlock>
           </Card>
           </div>
         );
       });

我在map之前添加了一个过滤器,但是我在数组的项目上收到错误:

var canvases = this.state.foodinfo.filter(item => food_group_id=== 'eb9fa7e9-3dc9-11e6-a9f9-28e347').map(function(data) {
             return (
               <div>
               <Card className="col-xs-12 col-sm-4 eachCard">
                 <CardImg top width="100%" src={data.food_item_pic} alt="Card image cap" />
                 <CardBlock className="cardBlock">
                   <CardTitle>{data.food_item_name}</CardTitle>
                   <CardSubtitle>${data.food_item_price}</CardSubtitle>
                   <span class="glyphicon glyphicon-plus-sign btnClass"></span>
                 </CardBlock>
               </Card>
               </div>
             );
           });

1 个答案:

答案 0 :(得分:1)

应该是filter(item => item.food_group_id ===吗?