时间戳

首页 > 解决方案 > 如何遍历类别以获取子类别并在其中创建嵌套的子类别数组？

javascript - 如何遍历类别以获取子类别并在其中创建嵌套的子类别数组？

问题描述

我有以下具有类别 ID、类别名称和子类别的类别对象数组

{
"categories":[
{
"id_product_cat":1,
"prod_category_name":"food",
"subcategory":"Pizza"
},
{
"id_product_cat":1,
"prod_category_name":"food",
"subcategory":"Burger"
},
{
"id_product_cat":1,
"prod_category_name":"food",
"subcategory":"Chicken"
},
{
"id_product_cat":1,
"prod_category_name":"food",
"subcategory":"Sandwiches"
},
{
"id_product_cat":2,
"prod_category_name":"drinks ",
"subcategory":"Alcoholic Drinks"
},
{
"id_product_cat":2,
"prod_category_name":"drinks ",
"subcategory":"Non-alcoholic Drinks"
},
{
"id_product_cat":2,
"prod_category_name":"drinks ",
"subcategory":"Coffee"
},
{
"id_product_cat":1,
"prod_category_name":"food",
"subcategory":"Test"
}
]
}

我想遍历 Categories 数组并返回一个带有 Category Id 的新数组，Category name 是每个不同类别的嵌套子类别数组。我想要的结果是：

{
"categories":[
{
"id_product_cat":1,
"prod_category_name":"food",
"subcategories":["Pizza","Burger","Chicken","Sandwiches"]
},
{
"id_product_cat":2,
"prod_category_name":"drinks ",
"subcategories":["Alcoholic Drinks","Non-alcoholic Drinks","Coffee"]
}]
}

标签： javascriptarraysjson

解决方案

为此，您需要将问题分成两部分。

  1. 首先，您需要将每个类别组合在一起。您可以简单地使用reduce来完成。（为什么用reduce来做呢？为了避免循环进入循环，所以很复杂）。
const groupedCategories = obj.categories.reduce((accumulator, element, index) => {
  const categoryId = element.id_product_cat;
  const category = element.prod_category_name;
  const subCategory = element.subcategory;

  if (accumulator[categoryId])
    return {
      ...accumulator,
      [categoryId]: {
        ...accumulator[categoryId],
        subCategories: [...accumulator[categoryId].subCategories, subCategory],
      }
    };
  else
   return {
    ...accumulator,
    [categoryId]: {
      prod_category_name: category,
      subCategories: [subCategory],
    }
  };
}, {});

完成后，您将正确分组类别。

  1. 最后，您需要正确格式化您的输出，为此，您可以简单地在您的 groupedCategories 对象上循环执行它，例如：
const output = {
  categories: Object.keys(groupedCategories).map(categoryId => ({
    id_product_cat: categoryId,
    prod_category_name: groupedCategories[categoryId].prod_category_name,
    subcategories: groupedCategories[categoryId].subCategories,
  }))
};

我希望这些代码示例可以帮助您找到实现目标的方法！

推荐阅读