Filter An Array with Object keys Dynamically

Question

I'm trying to filter an array, like for example the I want it to return all the color, sizes and etc., I know you can it filter it by doing something like this :

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)

But what if there are like 100 attribute color and sizes, how to maybe like separate them via there color sample if yellow array it will return all the yellow data like this

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

for sizes it will return for example small it will return all the small data like this:

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

If my question isn't that clear, comment down below so I could explain further. Thanks for your help

So developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… — epascarello
– epascarello, Commented Jul 29, 2021 at 16:31
hi @epascarello thanks for your comment, is there any kind of example you could give for my problem? — Mohammad Khan
– Mohammad Khan, Commented Jul 29, 2021 at 16:32
It's not very clear what you're really asking here. If you're asking how to filter, see these answers. If you're asking how to access an object property dynamically using a variable (e.g., "size" vs. "color"), see these answers. (Those play together, too.) — T.J. Crowder
– T.J. Crowder, Commented Jul 29, 2021 at 16:32

Other Me · Accepted Answer · 2021-07-29 16:49:50Z

1

This doesn't really match the format of the question but it is an effective answer.

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")));

edited Jul 29, 2021 at 16:49

answered Jul 29, 2021 at 16:38

Other Me

5082 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Mohammad Khan Over a year ago

Hi thanks for answering just what I needed, sorry for asking but can you do it with es6 functions like map or something?

Other Me Over a year ago

so does of not work? I personally don't use map myself to be honest, I can change it to ordinary loops though would that work?

Mohammad Khan Over a year ago

no it works thankfully not really familiar for loops, just gonna have to study I guess to manipulate the data

Vignesh Raja · Accepted Answer · 2021-07-29 17:13:27Z

1

Simple by using Array.filter. Hope you are expecting this output format.

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));

answered Jul 29, 2021 at 17:13

Vignesh Raja

8,9112 gold badges38 silver badges46 bronze badges

1 Comment

Mohammad Khan Over a year ago

Hey Man this is what I really wanted Thanks a lott with the es6 function and parameters passed on dynamically

EmreSr · Accepted Answer · 2021-07-29 16:56:57Z

As an addition i think getting attribute values dynamically with following code block would be good though.

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)
    }
  }
}

And then you can get values by array.filter

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

Collectives™ on Stack Overflow

Filter An Array with Object keys Dynamically

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related