How to merge two arrays based on the property value in react with ES6

Question

I have two arrays:

 a = [{"sourceId": "1", "targetId": "2", "name": "heats air"} , 
      {"sourceId": "3", "targetId": "4", "name": "power"}]

 b = [{"name": "Hair Dryer", "id": "1"}, 
      {"name": "Heating System", "id": "2"}, 
      {"name": "Mains", "id": "3"}, 
      {"name": "Blower", "id": "4"}]

How do I get the output like this:

[{"sourceId": "1", "targetId": "2", "name": "heats air", "from": "Hair Dryer", "to": "Heating System"}, 
 {"sourceId": "3", "targetId": "4", "name": "power","from": "Mains", "to": "Blower"]

I want to merge them based on the property values: the keys "sourceId" and "targetId" of array a should correspond to the key "id" of array b. If a sourceId is matched with an id, add the value of the name with key "from" to the object in array a; If a targetId is matched with an id, add the value of the name with key "to" to the item in array a. Also,I am wondering whether I can do this without using lodash. (using ES6)

It is unclear what the merging algorithm is supposed to be as the objects that get merged have no common properties. How do you determine what gets merged with what? Please describe "in words" what the merging algorithm is. And, how do you determine what from and to should be set to? — jfriend00
– jfriend00, Commented Sep 1, 2017 at 15:46
The keys "sourceId" and "targetId" of array a should correspond to the key "id" of array b. — hypha
– hypha, Commented Sep 1, 2017 at 15:49
Please edit your question to add the merging algorithm to your question. Also describe how from and to are supposed to be set. Comments should not be used for required information - that information should be added to the question itself. — jfriend00
– jfriend00, Commented Sep 1, 2017 at 15:52

Ori Drori · Accepted Answer · 2017-09-01 21:28:53Z

1

Convert b to a Map of id to name using Array#reduce. Then Array#map a to the required form using Object#assign, and the bMap:

const a = [{"sourceId":"1","targetId":"2","name":"heats air"},{"sourceId":"3","targetId":"4","name":"power"}];

const b = [{"name":"Hair Dryer","id":"1"},{"name":"Heating System","id":"2"},{"name":"Mains","id":"3"},{"name":"Blower","id":"4"}];

const bMap = b.reduce((map, item) => map.set(item.id, item.name), new Map);

const result = a.map((item) => (Object.assign({
  from: bMap.get(item.sourceId),
  to: bMap.get(item.targetId)
}, item)));

console.log(result);

edited Sep 1, 2017 at 21:28

answered Sep 1, 2017 at 15:54

Ori Drori

196k32 gold badges243 silver badges233 bronze badges

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

Comments

Steven Scaffidi · Accepted Answer · 2017-09-01 15:59:15Z

0

Here you go.

 const a = [{"sourceId": "1", "targetId": "2", "name": "heats air"} , 
      {"sourceId": "3", "targetId": "4", "name": "power"}]

 const b = [{"name": "Hair Dryer", "id": "1"}, 
      {"name": "Heating System", "id": "2"}, 
      {"name": "Mains", "id": "3"}, 
      {"name": "Blower", "id": "4"}]
      
 const result = a.reduce((arr, curr) => {
 	const from = b.filter(bObj => {
  	return bObj.id === curr.sourceId;
  })[0]
  const to = b.filter(bObj => {
  	return bObj.id === curr.targetId;
  })[0];
  arr.push({ ...curr, from: from.name, to: to.name });
  return arr;
 }, []);
 
 console.log(result);

answered Sep 1, 2017 at 15:59

Steven Scaffidi

2,3071 gold badge14 silver badges16 bronze badges

Collectives™ on Stack Overflow

How to merge two arrays based on the property value in react with ES6

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related