動態過濾帶有對象鍵的數組

Question

我正在嘗試過濾一個數組，例如我希望它返回所有顏色、大小等，我知道您可以通過執行以下操作來過濾它：

const products = [
  {
    name: "Product A",
    attributes: [
      {
        color: "Yellow",
        size: "Small",
        price: 100,
        quantity: 30,
      },
      {
        color: "Yellow",
        size: "Medium",
        price: 150,
        quantity: 20,
      },
      {
        color: "Yellow",
        size: "Large",
        price: 200,
        quantity: 10,
      },
      {
        color: "Red",
        size: "Small",
        price: 100,
        quantity: 15,
      },
      {
        color: "Red",
        size: "Medium",
        price: 150,
        quantity: 10,
      },
      {
        color: "Red",
        size: "Large",
        price: 200,
        quantity: 5,
      },
      {
        color: "Blue",
        size: "Small",
        price: 100,
        quantity: 15,
      },
      {
        color: "Blue",
        size: "Medium",
        price: 150,
        quantity: 10,
      },
      {
        color: "Blue",
        size: "Large",
        price: 200,
        quantity: 5,
      },
    ],
  },
];

const result = data.map(({ attributes }) =>
    attributes.filter(({ color }) => color === "Red")
  );. 

console.log(result)

但是，如果有 100 個屬性顏色和大小怎么辦，如何通過顏色樣本將它們分開，如果黃色數組它將返回所有黃色數據，如下所示

[
      {
        color: "Yellow",
        size: "Small",
        price: 100,
        quantity: 30,
      },
      {
        color: "Yellow",
        size: "Medium",
        price: 150,
        quantity: 20,
      },
      {
        color: "Yellow",
        size: "Large",
        price: 200,
        quantity: 10,
      },
]

對於大小，它將返回例如 small 它將返回所有小數據，如下所示：

[{
    color: "Yellow",
    size: "Small",
    price: 100,
    quantity: 30,
  },
  {
    color: "Red",
    size: "Small",
    price: 100,
    quantity: 15,
  },
  {
    color: "Blue",
    size: "Small",
    price: 100,
    quantity: 15,
  }]

如果我的問題不清楚，請告訴我，以便我澄清，謝謝您的幫助

Answer 1

這與問題的格式並不真正匹配，但它是一個有效的答案。

 const array = [ { color: "red", size: "small" }, { color: "yellow", size: "small" }, { color: "red", size: "large" } ]; function sortArrayByItemProperties(array, ...properties) { const map = {}; for(let i = 0; i < properties.length; i++) { const property = properties[i]; map[property] = {}; for(let ii = 0; ii < array.length; ii++) { const object = array[ii]; if(!map[property][object[property]]) map[property][object[property]] = []; map[property][object[property]].push(object); } } return map; } console.log(JSON.stringify(sortArrayByItemProperties(array, "color", "size")));

Answer 2

使用Array.filter 很簡單。 希望您期待這種輸出格式。

 var attributes = [{color:"Yellow",size:"Small",price:100,quantity:30},{color:"Yellow",size:"Medium",price:150,quantity:20},{color:"Yellow",size:"Large",price:200,quantity:10},{color:"Red",size:"Small",price:100,quantity:15},{color:"Red",size:"Medium",price:150,quantity:10},{color:"Red",size:"Large",price:200,quantity:5},{color:"Blue",size:"Small",price:100,quantity:15},{color:"Blue",size:"Medium",price:150,quantity:10},{color:"Blue",size:"Large",price:200,quantity:5}]; function filterBy(attr, val) { return attributes.filter(item => item[attr] == val); } console.log(filterBy("color", "Yellow")); console.log(filterBy("size", "Large")); console.log(filterBy("price", 200));

Answer 3

另外，我認為使用以下代碼塊動態獲取屬性值會很好。

const colors = []
const sizes = []
const prices = []
const quantities = []

for (product of products) {
  for (attribute of product.attributes) {
    if (colors.indexOf(attribute.color) == -1) {
      colors.push(attribute.color)
    }
    if (sizes.indexOf(attribute.size) == -1) {
      sizes.push(attribute.size)
    }
    if (prices.indexOf(attribute.price) == -1) {
      prices.push(attribute.price)
    }
    if (quantities.indexOf(attribute.quantity) == -1) {
      quantities.push(attribute.quantity)
    }
  }
}

然后你可以通過 array.filter 獲取值

for (product of products) {
  const result = product.attributes.filter(function(attributes) {
    return attributes.color == "Red"
  })
}