时间戳

首页 > 解决方案 > 映射内部映射以呈现与外部映射函数标题匹配的数据

reactjs - 映射内部映射以呈现与外部映射函数标题匹配的数据

问题描述

我有一个 JSON 文件，如下所示：

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

我想要做的是渲染每个子类别并在里面映射以渲染一张卡片，其中每个菜的详细信息对应于每个子类别的标题。请参阅此链接中的示例： 组件想要的图像

最好的方法是什么？

感谢您的回答。

标签： reactjsjsonmap-function

解决方案

您可以使用underscore.js's groupBy 函数将数据与子类别分组。当您获取数据时，您可以使用 map on 来呈现卡片详细信息。

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'))
<script src="https://cdn.jsdelivr.net/npm/underscore@1.13.1/underscore-umd-min.js"></script>

推荐阅读