javascript - 我如何获取一个对象数组并减少它，以便组合重复对象键的数据？

Question

我正在开发一个模仿零售网站的 React 应用程序。我的主页显示一个项目，下面有相关产品的卡片组件。当我单击其中一个相关产品上的按钮时，我会打开一个比较模式，比较当前产品和所点击产品的功能。我认为要实现这一点，我将创建一个包含被点击产品和主页产品的组合功能的数组。我一直在努力创建一个对象数组，其中每个独特的功能都有一个对象，其中包含有关功能以及该功能属于哪个产品的数据。

截至目前，我已经能够获得两个产品具有的所有功能的数组，但如果产品具有重叠的功能，则该数组会重复。这让我不确定如何呈现比较表，因为我计划映射数组并为每个功能创建一个表行。我当前格式化这些功能的代码如下:

formatFeatures: (currentProd, clickedProd) => {
let combinedFeatures = [];
if (clickedProd.features) {
  clickedProd.features.forEach(feature => {
    let obj = {}
    let vals = Object.values(feature);
    obj[vals[0]] = [vals[1], clickedProd.id]
    combinedFeatures.push(obj)
  })
}
currentProd.features.forEach(feature => {
  let obj = {}
  let vals = Object.values(feature);
  obj[vals[0]] = [vals[1], currentProd.id]
  combinedFeatures.push(obj)
})

let formattedFeatures = combinedFeatures.reduce((allFeatures, feature) => {
  if (Object.keys(feature) in allFeatures) {
    allFeatures = [allFeatures[Object.keys(feature)]].concat(feature);
  } else {
    allFeatures.push(feature);
  }
  return allFeatures;
}, [])

结果是:

[{
  "Fabric": ["100% Cotton", 28214]
}, {
  "Cut": ["Skinny", 28214]
}, {
  "Fabric": ["Canvas", 28212]
}, {
  "Buttons": ["Brass", 28212]
}]

这与我正在寻找的非常接近，我有一个对象数组，其中包含有关产品的功能和产品 ID 的信息，但“Fabric”中的重复是我正在努力解决的问题.理想情况下，结果应如下所示:

[{
  "Fabric": ["100% Cotton", 28214],
  ["Canvas", 28212]
}, {
  "Cut": ["Skinny", 28214]
}, {
  "Buttons": ["Brass", 28212]
}]

如果有人可以帮助指导我如何更改我的格式化功能来完成此任务，我将不胜感激。或者，如果有人知道根据我当前的结果用单行动态格式化表格的更好方法，那也很好。

进入我的辅助函数的数据如下:

当前产品:

{
  "id": 28212,
  "name": "Camo Onesie",
  "slogan": "Blend in to your crowd",
  "description": "The So Fatigues will wake you up and fit you in. This high energy camo will have you blending in to even the wildest surroundings.",
  "category": "Jackets",
  "default_price": "140.00",
  "created_at": "2021-07-10T17:00:03.509Z",
  "updated_at": "2021-07-10T17:00:03.509Z",
  "features": [{
    "feature": "Fabric",
    "value": "Canvas"
  }, {
    "feature": "Buttons",
    "value": "Brass"
  }]
}

点击产生:

{
  "name": "Morning Joggers",
  "category": "Pants",
  "originalPrice": "40.00",
  "salePrice": null,
  "photo": "https://images.unsplash.com/photo-1552902865-b72c031ac5ea?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=300&q=80",
  "id": 28214,
  "features": [{
    "feature": "Fabric",
    "value": "100% Cotton"
  }, {
    "feature": "Cut",
    "value": "Skinny"
  }]
}

Answer 1

如何构建数据似乎是一个更大的问题。你说理想情况下你的结果应该是这样的:

[
  {
    "Fabric":
      ["100% Cotton",28214],
      ["Canvas",28212]
  },
  {
    "Cut":
      ["Skinny",28214]
  },
  {
    "Buttons":
      ["Brass",28212]
  }
]

但您真正想从中得到的是每个项目特征(如果存在)的行和关联值的组合列表。然后，您真正需要的只是要显示的每一行的一组键，以及允许您通过该键访问所需属性的对象。

键数组可能如下所示:

["Fabric", "Cut", "Buttons"]

您想要使用这些键访问属性的对象，例如您的 CurrentProd，可能是这个(请注意，您可以通过调用 CurrentProd.features["FeatureName"]):

{
  "id":28212,
  "name":"Camo Onesie",
// ... //
  "features":  {
    "Fabric": "Canvas",
    "Buttons": "Brass"
  }
}

话虽如此，要获得这些东西，您可以通过减少 CurrentProd.features 的组合数组来获得键数组，我们称之为 allFeatureKeys和 ClickedProd.features:

const allFeatureKeys = [
    ...CurrentProd.features,
    ...ClickedProd.features
  ].reduce((acc, cur) => {
      return acc.findIndex(cur.feature) > -1 ? [...acc, cur.feature] : acc
    },
    []
  );

并且您可以通过减少其特征数组将 CurrentProd 修改为上述数据形状，我们称其为 modifiedCurrentProd:

const modifiedCurrentProd = {
  ...CurrentProd,
  features: CurrentProd.features.reduce((acc, cur) => {
    return {...acc, [cur.feature]: cur.value} 
  }, {})
}

对 modifiedClickedProd 对象重复上述操作，然后在创建表值时您可以同时使用 CurrentProd.features 和 ClickedProd.features 值进行查找。

仅作为示例，因为我不知道您的 react 结构或您想要显示的数据，您可以呈现表行中的值映射到键上以构成每一行，并且对于每个功能键，您从 modifiedCurrentProd 或 modifiedClickedProd 对象的 features 属性访问该值:

  <div id="table">
    {allFeatureKeys.map((featureKey) => {
       return <div id="table-row">
         <div>{featureKey}</div>
         <div>
           { 
             modifiedCurrentProd.features[featureKey] !== undefined 
               ? modifiedCurrentProd.id 
               : "n/a"
           }
         </div>
         <div>
           {
             modifiedClickedProd.features[featureKey] !== undefined
               ? modifiedClickedProd.id
               : "n/a"
           }
         </div>
       </div>
     })}
  </div>