Maping inside a map to render the data matching to the title of the outer map function

Question

I have a a JSON file like the one below:

[
{
"category":  "food",
"subcategory": "Snacks",
"eng-name": "Eng name here",
"thai-name": "thai name here",
"description": "Food Description here",
"price": "price per dish or glass",
"price2": "price per bottles",
"tags": "[tags to find type of food or drink (Chicken, vegetarian, vegan, whisky, red wine, chardonnay)]",
"image": "url of img in upload in server"
},
{
"category":  "food",
"subcategory": "Starters",
"eng-name": "Eng name here",
"thai-name": "thai name here",
"description": "Food Description here",
"price": "price per dish or glass",
"price2": "price per bottles",
"tags": "[tags to find type of food or drink (Chicken, vegetarian, vegan, whisky, red wine, chardonnay)]",
"image": "url of img in upload in server"
},
{
"category":  "food",
"subcategory": "Snacks",
"eng-name": "Eng name here",
"thai-name": "thai name here",
"description": "Food Description here",
"price": "price per dish or glass",
"price2": "price per bottles",
"tags": "[tags to find type of food or drink (Chicken, vegetarian, vegan, whisky, red wine, chardonnay)]",
"image": "url of img in upload in server"
}
]

What i want to do is to render each subcategory and map inside to render a card with the details of each dish corresponding to the title of each subcategory. see example in this link: Component wanted image

What is the best way to do it ?

Thanks for your answers.

user_1589444 · Answer

You can use underscore.js's groupBy function to group your data with subcategory. When you get data you can use map on to render card details.

var data = [
{
"category":  "food",
"subcategory": "Snacks",
"eng-name": "Eng name here",
"thai-name": "thai name here",
"description": "Food Description here",
"price": "price per dish or glass",
"price2": "price per bottles",
"tags": "[tags to find type of food or drink (Chicken, vegetarian, vegan, whisky, red wine, chardonnay)]",
"image": "url of img in upload in server"
},
{
"category":  "food",
"subcategory": "Starters",
"eng-name": "Eng name here",
"thai-name": "thai name here",
"description": "Food Description here",
"price": "price per dish or glass",
"price2": "price per bottles",
"tags": "[tags to find type of food or drink (Chicken, vegetarian, vegan, whisky, red wine, chardonnay)]",
"image": "url of img in upload in server"
},
{
"category":  "food",
"subcategory": "Snacks",
"eng-name": "Eng name here",
"thai-name": "thai name here",
"description": "Food Description here",
"price": "price per dish or glass",
"price2": "price per bottles",
"tags": "[tags to find type of food or drink (Chicken, vegetarian, vegan, whisky, red wine, chardonnay)]",
"image": "url of img in upload in server"
}
];
console.log(_.groupBy(data,'subcategory'))

Maping inside a map to render the data matching to the title of the outer map function

1 Answers