Javascript map over two arrays of objects

Question

I have two arrays:

const people = [{id:1, name:"John"}, {id:2, name:"Alice"}];
const address = [{id:1, peopleId: 1, address: "Some street 1"}, {id:2, peopleId: 2, address: "Some street 2"}]

How can I filter over this two arrays and get one like this:

const fullData = [{id: 1, name: "John", address: "Some street 1"}, {id: 2, name: "Alice", address: "Some street 2"}]

The posted question does not appear to include [any attempt](https://idownvotedbecau.se/noattempt/) at all to solve the problem. StackOverflow expects you to [try to solve your own problem first](https://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-expected-of-stack-overflow-users), as your attempts help us to better understand what you want. Please edit the question to show what you've tried, so as to illustrate a specific roadblock you're running into a [MCVE]. For more information, please see [ask] and take the [tour]. — CertainPerformance, Dec 06 '18 at 08:38
Possible duplicate of [How can I merge properties of two JavaScript objects dynamically?](https://stackoverflow.com/questions/171251/how-can-i-merge-properties-of-two-javascript-objects-dynamically) — ksav, Dec 06 '18 at 08:40

Code Maniac · Answer 1 · 2018-12-06T10:06:30.340

11

You can try this.

With the help of map() and find()

const people = [{id:1, name:"John"}, {id:2, name:"Alice"}];
const address = [{id:1, peopleId: 1, address: 'Some street 1'}, {id:2, peopleId: 2, address: 'Some street 2'}]

let op = people.map((e,i)=>{
  let temp = address.find(element=> element.id === e.id)
  if(temp.address) {
    e.address = temp.address;
  }
  return e;
})
console.log(op);

edited Dec 06 '18 at 10:06

answered Dec 06 '18 at 08:45

Code Maniac

35,187
4
31
54

I'm not entirely sure but I think the matcher in `address` is `peopleId`, whereas `id` is just the address row identifier. – nicholaswmin Dec 06 '18 at 08:46
@NicholasKyriakides well id is meant to be used in that way. don't know how op has used. – Code Maniac Dec 06 '18 at 08:49
What if a person doesn't have an address? Your `map` will throw a TypeError, no? – nicholaswmin Dec 06 '18 at 08:58
@NicholasKyriakides op didn't asked.anyways added a check for that. – Code Maniac Dec 06 '18 at 10:07

score 3 · Answer 2 · answered Dec 06 '18 at 08:46

Like this:

const persons = [{id:1, name: 'John'}, {id:2, name: 'Alice'}]

const addresses = [{id:1, peopleId: 1, address: 'Some street 1'}, {id:2, peopleId: 2, address: 'Some street 2'}]

const result = persons.map(person => {
  const addressItem = addresses.find(address => address.peopleId === person.id)
  
  person.address = addressItem 
  ? addressItem.address
  : null
  
  return person
})

console.log(result)

score 0 · Answer 3 · edited Dec 15 '20 at 07:04

How to map two address with peopleId 2

const persons = [{id:1, name: 'John'}, {id:2, name: 'Alice'}]

const addresses = [{id:1, peopleId: 1, address: 'Some street 1'}, {id:2, peopleId: 2, address: 'Some street 2'},{id:3, peopleId: 2, address: 'Some street 3'}]

const result = persons.map(person => {
  const addressItem = addresses.find(address => address.peopleId === person.id)
  
  person.address = addressItem 
  ? addressItem.address
  : null
  
  return person
})

console.log(result)

score 0 · Answer 4 · answered Dec 15 '20 at 07:12

You can use reduce to do that,

const people = [{id:1, name:"John"}, {id:2, name:"Alice"}];
const address = [{id:1, peopleId: 1, address: 'Some street 1'}, {id:2, peopleId: 2, address: 'Some street 2'}]


const res = people.reduce((acc, curr) => {
  const index = address.findIndex(item => item.peopleId === curr.id);
  if(index > -1) {
    curr.address = address[index].address;
  }
  
  acc.push(curr);
  return acc;
}, []);
console.log(res);

Javascript map over two arrays of objects

4 Answers4