Filtering using two array of objects using JavaScript

Question

I have an array as shown:

var arrOne = [{id: 3},{id: 8},{id: 12}];

And another array as shown:

var arrTwo = [
  {id: 1, val: 'Adam'},
  {id: 3, val: 'Bailey'},
  {id: 8, val: 'Cathy'},
  {id: 12, val: 'David'},
  {id: 15, val: 'Earl'}
];

I want to iterate arrTwo based on arrOne, and get the val values out of arrTwo. So the result should be:

var result = ['Bailey', 'cathy', 'David'];

Tried concatenating .map with .filter:

arrOne.map(arOne => arrTwo.filter(artwo => {
    if(arOne.id === artwo.id) {
      return artwo.val
    } else {
      return false;
    }
}));

But it gives me all, and where it is false it adds false there, which I don't want. Any ideas where I am going wrong will be appreciated.

Editing as per norbitrial's answer:

const arrOne = [{id: 3},{id: 8},{id: 12}];
const arrTwo = [
                 {id: 1, val: 'Adam'}, 
                 {id: 3, val: 'Bailey'}, 
                 {id: 8,    val: 'Cathy'}, 
                 {id: 12, val: 'David'}, 
                 {id: 15, val: 'Earl'}
               ];

const result = arrOne.map(({id}) => arrTwo.find(e => {
  const someCond = someConditionaEval();
  if(someCond && e.id === id) {
     return e;
  } else {
     return false;
  }
}).val); //this breaks

arrOne.map(o => arrTwo.find(t => t.id === o.id));

RienNeVaPlu͢s
– RienNeVaPlu͢s

2020-04-18 17:17:45 +00:00
Commented Apr 18, 2020 at 17:17 — RienNeVaPlu͢s
– RienNeVaPlu͢s, Commented Apr 18, 2020 at 17:17

norbitrial · Accepted Answer · 2020-04-18 17:15:52Z

3

Using .map() and .find() combination:

const arrOne = [{id: 3},{id: 8},{id: 12}];
const arrTwo = [{id: 1, val: 'Adam'}, {id: 3, val: 'Bailey'}, {id: 8, val: 'Cathy'}, {id: 12, val: 'David'}, {id: 15, val: 'Earl'}];

const result = arrOne.map(({id}) => arrTwo.find(e => e.id === id).val);

console.log(result);

I hope this helps!

answered Apr 18, 2020 at 17:15

norbitrial

15.2k10 gold badges39 silver badges66 bronze badges

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

4 Comments

Uzair Khan Over a year ago

Thanks for the reply, and if I have to add some additional checks here?: if(e.id === id && someCheck1 && someCheck2) {return e} else {return false}

norbitrial Over a year ago

@MichaelPhilips Depends but most likely you can include into .find() condition.

Uzair Khan Over a year ago

My problem is that I have to add some if() conditions inside 'e => e.id === id', and if I do that, how do I do .val in the end? because to add if inside I'll have to add parenthesis, like .find(e => { const someCond = someCondEvaluator(); if(someCond && e.id === id) { return e } else { return false } }.val //.val will not work here

norbitrial Over a year ago

@MichaelPhilips That's a short version what I made in my answer, but you can use like a function block as the following: .find(e => { if (e.id === id) { /* your code */ } else { /* your code */ } }) but for sure you need return boolean type for .find(). I hope that clarifies!

palaѕн · Accepted Answer · 2020-04-18 17:23:01Z

1

You can use .filter() method on arrTwo and then using .includes() method get the filtered objects from arrTwo and then finally using .map() get only the val property values from each filtered object like:

var arrOne = [{id: 3},{id: 8},{id: 12}];
var arrTwo = [{id:1,val:"Adam"},{id:3,val:"Bailey"},{id:8,val:"Cathy"},{id:12,val:"David"},{id:15,val:"Earl"}];
             
var result = arrTwo.filter(a => arrOne.map(o=>o.id).includes(a.id)).map(o=>o.val)
console.log( result )

edited Apr 18, 2020 at 17:23

answered Apr 18, 2020 at 17:17

palaѕн

74.2k17 gold badges123 silver badges140 bronze badges

Comments

Nina Scholz · Accepted Answer · 2020-04-18 17:26:11Z

1

You could take an object with the values and then map the wanted values.

var arrOne = [{ id: 3 }, { id: 8 }, { id: 12 }],
    arrTwo = [{ id: 1, val: 'Adam' }, { id: 3, val: 'Bailey' }, { id: 8, val: 'Cathy' }, { id: 12, val: 'David' }, { id: 15, val: 'Earl' }],
    values = arrTwo.reduce((r, { id, val }) => (r[id] = val, r), {}),
    result = arrOne.map(({ id }) => values[id]);

console.log(result);

answered Apr 18, 2020 at 17:26

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

Comments

Ori Drori · Accepted Answer · 2020-04-18 17:41:09Z

1

Create a Map of val by id from arrTwo, and then map arrOne, and extract the val from the Map using the id.

Why I prefer creating a Map/dictionary (object) instead of using Array.map() with Array.find()?

Because of the complexity - Array.map() with Array.find(), for example, is O(n * m), while creating a Map and then using Array.map() to get the values is O(n + m). However, if you've got two small arrays, this shouldn't actually hurt actual performance.

const arrOne = [{id: 3},{id: 8},{id: 12}];
const arrTwo = [{id: 1, val: 'Adam'}, {id: 3, val: 'Bailey'}, {id: 8, val: 'Cathy'}, {id: 12, val: 'David'}, {id: 15, val: 'Earl'}];

const valById = new Map(arrTwo.map(({ id, val }) => [id, val]));

const result = arrOne.map(o => valById.get(o.id));

console.log(result);

edited Apr 18, 2020 at 17:41

answered Apr 18, 2020 at 17:19

Ori Drori

196k32 gold badges243 silver badges233 bronze badges

Comments

Siva Kondapi Venkata · Accepted Answer · 2020-04-18 17:45:00Z

1

Build an object from arrTwo to gather val's in one iteration.
use map on arrOne and get val from above object.

const update = (arr1, arr2) => {
  const all = Object.fromEntries(arr2.map(({ id, val }) => [id, val]));
  return arr1.map(({ id }) => all[id]);
};

var arrOne = [{ id: 3 }, { id: 8 }, { id: 12 }];

var arrTwo = [
  { id: 1, val: "Adam" },
  { id: 3, val: "Bailey" },
  { id: 8, val: "Cathy" },
  { id: 12, val: "David" },
  { id: 15, val: "Earl" }
];

console.log(update(arrOne, arrTwo));

answered Apr 18, 2020 at 17:45

Siva Kondapi Venkata

11.1k2 gold badges20 silver badges32 bronze badges

Collectives™ on Stack Overflow

Filtering using two array of objects using JavaScript

5 Answers 5

4 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

4 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related