Fetching Objects from Array by passing key & value in javascript

Question

This is my Array of objects. I want to filter the objects by passing query in a function.

const products = [{
    name: "A",
    color: "Blue",
    size: 50
  },
  {
    name: "B",
    color: "Blue",
    size: 60
  },
  {
    name: "C",
    color: "Black",
    size: 70
  },
  {
    name: "D",
    color: "Green",
    size: 50
  }
];

My desired output which will filter from the query which I am passing in function which can be anything

{
  name: "A",
  color: "Blue",
  size: 50
}, {
  name: "C",
  color: "Black",
  size: 70
}

This is my query object which I will pass to function

const filter = {
  color: ["Blue", "Black"],
  size: [70, 50]
};

This is my function which I can assign to other variable and use it for further operations

const filteredData = filterIt(products, filter);

that is what issue I have. / /Function const filterIt = (data, filter) => { //console.log(filter); for (let i = 0; i < data.length; i++) { //console.log("through array",data[i][Object.keys(filter)[i]]); console.log("through query"); /* for (const [key, value] of Object.entries(filter)) { // console.log(key, value); console.log(data[i]) } */ } }; — jeetdeveloper
– jeetdeveloper, Commented Jul 11, 2019 at 10:57
Best to add that to the question where it can be properly formatted rather than a comment where it is very hard to read — charlietfl
– charlietfl, Commented Jul 11, 2019 at 11:04
ok.. Actually I was not sure about my approach as I am newbie in javascript thats why didnt posted — jeetdeveloper
– jeetdeveloper, Commented Jul 11, 2019 at 11:06
What if some value has a Blue color, but size different from 70 and 50? Should it be included or not? — lealceldeiro
– lealceldeiro, Commented Jul 11, 2019 at 11:07
ya...sorry for last comment m looking for the code which includes the different size objects — jeetdeveloper
– jeetdeveloper, Commented Jul 11, 2019 at 12:11

lealceldeiro · Accepted Answer · 2019-07-11 12:31:49Z

1

Here is another option:

function filterIt(products, filter) {
  return products.filter(p => {
    for (const k in filter) {
      if (filter[k].indexOf(p[k]) === -1) {
        return false;
      }
    }
    return true;
  })
}

See a Demo

If you want to make an OR instead of an AND in the logic the previous function modified would be:

function filterIt(products, filter) {
  return products.filter(p => {
    for (const k in filter) {
      // if a value of any property of the product is contained in a filter array, include it
      if (filter[k].indexOf(p[k]) !== -1) {
        return true;
      }
    }
    return false;
  })
}

See a Demo for this one too :)

edited Jul 11, 2019 at 12:31

answered Jul 11, 2019 at 11:14

lealceldeiro

15.1k7 gold badges54 silver badges85 bronze badges

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

3 Comments

jeetdeveloper Over a year ago

Thank you for your help but I would like to know one thing which you already asked. like if i want to include the values which has blue color but size different. while passing the same query

lealceldeiro Over a year ago

@jeetdeveloper See my answer updated, including another demo: stackblitz.com/edit/… . Notice, that this is an OR among all the filters, not just the color or size. Let me know if you have any doubts ;)

lealceldeiro Over a year ago

If you want to make a more complex comparison and yet keep the function generic, you could need to make the filter object more complex and include in it what kind of comparison you want to perform and stuff like that. Otherwise if you want to stick only to size you can directly check for the size property directly and if it is present then just keep that product in the final result no matter the color matches or not.

Nina Scholz · Accepted Answer · 2019-07-11 11:01:48Z

1

You could get the entries of the filter object and take key and value for checking with includes.

const
    filterBy = filter => o => Object.entries(filter).every(([k, v]) => v.includes(o[k])),
    filterIt = (array, filter) => array.filter(filterBy(filter)),
    products = [{ name: "A", color: "Blue", size: 50 }, { name: "B", color: "Blue", size: 60 }, { name: "C", color: "Black", size: 70 }, { name: "D", color: "Green", size: 50 }],
    filter = { color: ["Blue", "Black"], size: [70, 50] },
    filteredData = filterIt(products, filter);

 console.log(filteredData);

.as-console-wrapper { max-height: 100% !important; top: 0; }

answered Jul 11, 2019 at 11:01

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

Comments

Rahi · Accepted Answer · 2019-07-11 11:40:17Z

0

const products = [{
    name: "A",
    color: "Blue",
    size: 50
  },
  {
    name: "B",
    color: "Blue",
    size: 60
  },
  {
    name: "C",
    color: "Black",
    size: 70
  },
  {
    name: "D",
    color: "Green",
    size: 50
  }
];
const filter = {
  color: ["Blue", "Black"],
  size: [70, 50]
};


let filterIt = (products, filter) => {

  return products.filter(p => {
    
    //get all filter keys
    let keys = Object.keys(filter);
    
    let validkeys = [];
    
    keys.forEach(k=>{
      // check if filter property exist and includes filter value
      if(p.hasOwnProperty(k) && filter[k].includes(p[k])){
        validkeys.push(true);
      }
      
    })
    
    //check all filter matches
    return validkeys.length === keys.length;
    
  });

}

const filteredData = filterIt(products, filter);
console.log("...filteredData", filteredData);

answered Jul 11, 2019 at 11:40

Rahi

3241 silver badge11 bronze badges

2 Comments

jeetdeveloper Over a year ago

Thank you for your help but I would like to know one thing which you already asked. like if i want to include the values which has blue color but size different. while passing the same query

Rahi Over a year ago

@jeetdeveloper then push valid filter keys validkeys.push(k); Then valid product can be determined like return validkeys.includes('color'). It is all about manipulating filter condition.

Collectives™ on Stack Overflow

Fetching Objects from Array by passing key & value in javascript

3 Answers 3

3 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related