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

【问题标题】：How do I loop through Categories to get sub categories and create a nested subcategories array within it?如何遍历类别以获取子类别并在其中创建嵌套的子类别数组？
【发布时间】：2021-05-21 06:47:32
【问题描述】：

我有以下具有类别 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"]
}]
}

【问题讨论】：

标签： javascript arrays json

【解决方案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],
    }
  };
}, {});

一旦你这样做了，你就会对你的类别进行正确的分组。

最后，您需要正确设置输出格式，为此，您可以简单地使用 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,
  }))
};

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

【讨论】：

【解决方案2】：

您可以使用Array.reduce() 收集所有类别。

let data = {
"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"
}
]
}

let existingCategory = acc.find((checkCategory)=>{ return category.id_product_cat === checkCategory.id_product_cat });
if(existingCategory){// checking for existing category
    existingCategory.subcategory.push(category.subcategory);
}else{
    category.subcategory = [category.subcategory];
    acc.push(category);
}
return acc;
},[]);
console.log(categories);

【讨论】：