Question

我对React / ES6相当陌生，当我使用reduce方法将从API接收到的平面数组转换为嵌套对象时，出现了一个奇怪的行为。我已经很熟悉地图和过滤器，但是以前从未使用过reduce。

我很确定我使用错了，但是它像这样。

我有以下平面数据集：

[
  {
    category:"Category1",
    subCategory:"SubCategory1",
    productType:"ProductType1",
    brand:"brand1"
  },
  {
    category:"Category1",
    subCategory:"SubCategory2",
    productType:"ProductType2",
    brand:"brand2"
  },
  {
    category:"Category1",
    subCategory:"SubCategory2",
    productType:"ProductType2",
    brand:"brand3"
  },
  {
    category:"Category2",
    subCategory:"SubCategory1",
    productType:"ProductType1",
    brand:"brand1"
  },
  {
    category:"Category2",
    subCategory:"SubCategory1",
    productType:"ProductType2",
    brand:"brand2"
  }
]

我正在使用以下代码从平面数据集中获取嵌套对象。

getNestedData() {
  var baseData = this.getBaseData();

  return baseData.reduce((categories,category) => {
    if(!categories[category.category]){
      categories[category.category] = {
        category: category.category,
        subCategories: baseData.filter(bd => bd.category === category.category)
          .reduce((subCategories,subCategory) => {
            if(!subCategories[subCategory.subCategory]) {
              subCategories[subCategory.subCategory] = {
                subCategory: subCategory.subCategory,
                productTypes: baseData.filter(bd => bd.category === subCategory.category && bd.subCategory === subCategory.subCategory)
                  .reduce((productTypes,productType) => {
                    if(!productTypes[productType.productType]) {
                      productTypes[productType.productType] = {
                        productType: productType.productType,
                        brands: baseData.filter(bd => bd.category === productType.category && bd.subCategory === productType.subCategory && bd.productType === productType.productType)
                          .reduce((brands,brand) => {
                            if(!brands[brand.brand]) {
                              brands[brand.brand] = {
                                brand: brand.brand
                              }
                            }
                            return brands;
                          }) 
                      };
                    }
                    return productTypes;
                  })
              };
            }
            return subCategories;
          })
      }
    }
    return categories;
  });
}

但是，结果不是我期望的。它返回数组第一类内的根数组对象。像Category1 => [Category1,Category2]。如果您将类别1的孩子归为一类，则会发生同样的事情。

我准备了以下jsFiddle来展示我的问题。

让我知道我做错了什么，我用Google搜索了好几个小时。我也想知道这种方式是否是最有效的？

编辑：

有一个预期输出的例子：

[
  {
    category: "Category1"
    subCategories:[
      {
        subCategory:"SubCategory1",
        productTypes:[
          {
            productType:"ProductType1",
            brands:["Brand1"]    
          }
        ]   
      },
      {
        subCategory:"SubCategory2",
        productTypes:[
          {
            productType:"ProductType2",
            brands:["Brand2","Brand3"]
          }   
        ]
      }
    ]
  },
  {
    category: "Category2",
    subCategories:[
      {
        subCategory:"SubCategory1",
        productTypes:[
          {
            productType:"ProductType1",
            brands:["Brand1"]
          },
          {
            productType:"ProductType2",
            brands:["Brand2"]
          }
        ]
      }
    ]
  }
]

编辑

垫子是正确的，我在使用reduce时忘记传递初始值。传递初始值会使我的工作减少。这样便可以更改代码以获得预期的结果。该代码不是最优雅，但效果很好：

getNestedData()
{
    var baseData = this.getBaseData();
  return baseData
  .map(c => {return c.category;})
  .reduce((categories,category) => {
  var currentCategory = categories.filter(
    c => c.category === category
  );
    if (currentCategory.length === 0) {
            var categoryData = baseData.filter(bd => bd.category === category);
      categories.push({
        category:category,
        subCategories: categoryData
        .map(c => {return c.subCategory})
        .reduce((subCategories,subCategory) => {
            var currentSubCategory = subCategories.filter(sc => sc.subCategory === subCategory)
            if(currentSubCategory.length === 0)
          {
            var subCategoryData = categoryData.filter(cd => cd.subCategory === subCategory);
            subCategories.push({
                subCategory:subCategory,
              productTypes: subCategoryData
              .map(scd => {return scd.productType})
              .reduce((productTypes,productType) => {
                var currentproductType = productTypes.filter(pt => pt.productType === productType);
                if(currentproductType.length === 0)
                {
                    var productTypeData = subCategoryData.filter(scd => scd.productType === productType)
                  productTypes.push({
                    productType:productType,
                    brands: productTypeData
                    .map(ptd => {return ptd.brand})
                    .reduce((brands,brand) => {
                        var currentBrand = brands.filter(b => b.brand === brand);
                      if(currentBrand.length === 0)
                      {
                        brands.push({brand:brand});
                      }
                      return brands;
                    },[])
                  });
                }
                return productTypes;
              },[])
            });
          }
          return subCategories;
        },[])
      });
    }
    return categories;
  },[])
}

There是具有预期行为的有效jsFiddle。

Answer 1

因此，您似乎正在尝试对数组数据进行非规范化。您的嵌套严重的函数很难阅读，而且我认为，如果使用lodash的set函数，则可以轻松实现所需的功能。例如：

const data = [
  {
    category:"Category1",
    subCategory:"SubCategory1",
    productType:"ProductType1",
    brand:"brand1"
  },
  {
    category:"Category1",
    subCategory:"SubCategory2",
    productType:"ProductType2",
    brand:"brand2"
  },
  {
    category:"Category1",
    subCategory:"SubCategory2",
    productType:"ProductType2",
    brand:"brand3"
  },
  {
    category:"Category2",
    subCategory:"SubCategory1",
    productType:"ProductType1",
    brand:"brand1"
  },
  {
    category:"Category2",
    subCategory:"SubCategory1",
    productType:"ProductType2",
    brand:"brand2"
  }
]

const result = data.reduce((output, item) => {
  _.set(output, `${item.category}.subCategories.${item.subCategory}.productTypes.${item.productType}.brands.${item.brand}.brand`, item.brand)
  return output
}, {})

console.log(result)

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script>

您的代码无法正常工作（忽略输入错误）的原因是，我认为您忘记了为reduce函数提供初始值。查看最后一个可选参数here。

Javascript将平面数据转换为嵌套对象

编辑

1 个答案: