使用reduce對嵌套物件進行分組

我有一個包含物件的陣列

const data = [{
  "id": 19887003,
  "category": "Shops",
  "details": "Shoe Store",
  "star": 2,
  "subCategory": "Outlet",
},
{
  "id": 19234003,
  "category": "Shops",
  "details": "Shoe Point",
  "star": 2,
  "subCategory": "Outlet",
},
{
  "id": 190456003,
  "category": "Food",
  "details": "Korean",
  "star": 4,
  "subCategory": "Restaurant",
},
{
  "id": 190111003,
  "category": "Food",
  "details": "Chinese",
  "star": 4,
  "subCategory": "Restaurant",
},
{ 
  "id": 1902303,
  "category": "Food",
  "details": "Lounge",
  "star": 4,
  "subCategory": "Bar",
}]

這是一小部分，但所有物件的結構都是相同的：我有一個類別，有多個子類別，有時子類別有詳細資訊..例如，類別 food 有子類別restourant，restourant 有多種型別（中文、韓文） . 我的目標是獲得這樣的結構：

[
   { 
      "category": "Food",
      "subCategories": [
       {
        "Subcategory": "Bar",
        "details": [
           { 
            name: "Lounge",
            star: 2,
            id: 1902303
           }
        ]
       },
       {
        "Subcategory": "Restaurant",
        "details": [
           { 
            name: "Chinese",
            star: 4,
            id: 190111003
           },
           { 
            name: "Korean",
            star: 4,
            id: 190456003
           }
        ]
       }
    },
    { 
      "category": "Shops",
      "subCategories": [
       {
        "Subcategory": "Outlet",
        "details": [
           { 
            name: "Shoe Store",
            star: 2,
            id: 19887003
           },
           { 
            name: "Shoe Point",
            star: 2,
            id: 19234003
           }
          ]
         }
       ]
    }
]

我的嘗試：

const groupedCategories = data.reduce((accumulator, element) => {
  const detail = element.details;
  const category = element.category;
  const subCategory = element.subCategory;
  
    if (accumulator[category]){

    return {
      ...accumulator,
      [category]: {
        ...accumulator[category],
        subCategories: [...new Set([...accumulator[category].subCategories,subCategory])],
      }
    }}
  else {

   return {
    ...accumulator,
    [category]: {
      subCategories: [subCategory],
    }
  }
  }
  
}, {});

我嘗試使用這樣的 reduce 方法，但這不是我想要的確切結構，特別是如何將詳細資訊欄位放入子類別中。謝謝

uj5u.com熱心網友回復：

array.reduce似乎是正確的選擇。最簡單的方法是使用 double if 陳述句來檢查前一個元素（類別和子類別是否存在）并推入現有陣列或在上層創建新物件：

const data = [{
  "id": 19887003,
  "category": "Shops",
  "details": "Shoe Store",
  "star": 2,
  "subCategory": "Outlet",
},
{
  "id": 19234003,
  "category": "Shops",
  "details": "Shoe Point",
  "star": 2,
  "subCategory": "Outlet",
},
{
  "id": 190456003,
  "category": "Food",
  "details": "Korean",
  "star": 4,
  "subCategory": "Restaurant",
},
{
  "id": 190111003,
  "category": "Food",
  "details": "Chinese",
  "star": 4,
  "subCategory": "Restaurant",
},
{ 
  "id": 1902303,
  "category": "Food",
  "details": "Lounge",
  "star": 4,
  "subCategory": "Bar",
}]

let output = data.reduce((acc,cur) => {
    let {category, subCategory, ...rest} = cur;
    let prevCat = acc.find(x => x.category === category);
    if(!prevCat){
        acc.push({category, subCategories: [{subCategory, details: [rest]}]});
    } else {
        let prevSubCat = prevCat.subCategories.find(x => x.subCategory === subCategory);
        if(!prevSubCat) {
            prevCat.subCategories.push({subCategory, details: [rest]});
        } else {
            prevSubCat.details.push(rest);
        }
    }
    return acc;
}, []);

console.log(output);

標籤：javascript 目的 嵌套的 减少 团体

上一篇：Mule4：將json映射到xml有效負載dataweave2.0

下一篇：如何將不同的物件移交給方法