Sidhemu Sidhemu - 14 days ago 6
JSON Question

Filter data by a specific id for display in ReactJS

I want to select the data that matches this specific id. I have made an API call which gives me this JSON data, but I only want the data where the id is

eb9fa7e9-3dc9-11e6-a9f9-28e347
. How do I filter just this data?

[
{
"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"
}
]


How do I filter by
"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>
);
});


I added a filter before
map
, but I am getting an error on the item of the array:

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>
);
});

Answer

Should't it be filter(item => item.food_group_id ===?