array map, map array as a key of an array

Question

I know the title might sounds confusing, but i'm stuck for an hour using $.each. Basically I have 2 arrays

[{"section_name":"abc","id":1},{"section_name":"xyz","id":2}];

and [{"toy":"car","section_id":1},{"tool":"knife","section_id":1},{"weapons":"cutter","section_id":2}];

How do I put one into another as a new property key like

[{
    "section_name": "abc",
    "id": 1,
    "new_property_name": [{
        "toy": "car"
    }, {
        "tool": "knife"
    }]
}, {
    "section_name": "xyz",
    "id": 2,
    "new_property_name": [{
        "weapon": "cutter"
    }]
}]

From where you are getting these two json ? if it API in you end, it is better to update query then manipulating. — Niklesh Raut, Jul 18 '16 at 09:03
@Rishi if I have that flexibility then I no need to post question in here. — Eunice Chia, Jul 18 '16 at 09:05

Vincent Taing · Answer 1 · 2016-07-18T09:27:22.650

4

ES6 Solution :

const arr = [{"section_name":"abc","id":1},{"section_name":"xyz","id":2}];
const arr2 = [{"toy":"car","id":1},{"tool":"knife","id":1},{"weapons":"cutter","id":2}];

const res = arr.map((section,index) => {
  section.new_property_name = arr2.filter(item => item.id === section.id);
  return section;
});

EDIT : Like georg mentionned in the comments, the solution above is actually mutating arr, it modifies the original arr (if you log the arr after mapping it, you will see it has changed, mutated the arr and have the new_property_name). It makes the .map() useless, a simple forEach() is indeed more appropriate and save one line.

arr.forEach(section => {
   section.new_property_name = arr2.filter(item => item.id === section.id));
});

edited Jul 18 '16 at 09:27

answered Jul 18 '16 at 09:07

Vincent Taing

3,283
2
18
24

2

Since you're mutating each `section`, there's no need for `map` and `res`, simply `arr.forEach(section => section.new_property etc` will do – georg Jul 18 '16 at 09:11
@EuniceChia - Vincent is mutating the first array (arr) by adding "new_property_name" to it, so there is no need to create a new array "res" which will have the same properties like "arr" now. I would actually not mutate at all and create a complete new array. – DavidDomain Jul 18 '16 at 09:25

score 1 · Answer 2 · answered Jul 18 '16 at 09:09

try this

var data1 = [{"section_name":"abc","id":1},{"section_name":"xyz","id":2}];
var data2 = [{"toy":"car","id":1},{"tool":"knife","id":1},{"weapons":"cutter","id":2}];

var map = {};

//first iterate data1 the create a map of all the objects by its ids
data1.forEach( function( obj ){ map[ obj.id ] = obj });

//Iterate data2 and populate the new_property_name of all the ids 
data2.forEach( function(obj){ 
  var id = obj.id;
  map[ id ].new_property_name = map[ id ].new_property_name || []; 
  delete obj.id;
  map[ id ].new_property_name.push( obj ); 
});

//just get only the values from the map
var output = Object.keys(map).map(function(key){ return map[ key ] });
console.log(output);

Nina Scholz · Answer 3 · 2016-07-18T09:43:20.153

You could use ah hash table for look up and build a new object for inserting into the new_property_name array.

var array1 = [{ "section_name": "abc", "id": 1 }, { "section_name": "xyz", "id": 2 }],
    array2 = [{ "toy": "car", "section_id": 1 }, { "tool": "knife", "section_id": 1 }, { "weapons": "cutter", "section_id": 2 }],
    hash = Object.create(null);

array1.forEach(function (a) {
    a.new_property_name = [];
    hash[a.id] = a;
});
array2.forEach(function (a) {
    hash[a.section_id].new_property_name.push(Object.keys(a).reduce(function (r, k) {
        if (k !== 'section_id') {
            r[k] = a[k];
        }
        return r;
    }, {}));
});
    
console.log(array1);

You can add `new_property_name` in first loop so there is no need to check in second one. — Morteza Tourani, Jul 18 '16 at 09:32

score 0 · Answer 4 · answered Jul 18 '16 at 09:05

0

Seems like by using Jquery $.merge() Function you can achieve what you need. Then we have concat function too which can be used to merge one array with another.

answered Jul 18 '16 at 09:05

Deepak Singh

610
1
7
23

@EuniceChia I haven't personally used $.map() but this is what i have found http://stackoverflow.com/a/749119/6468641 – Deepak Singh Jul 18 '16 at 09:08

Joshua Rajandiran · Answer 5 · 2016-07-18T09:08:20.960

0

Use Object.assign()

In your case you can do it like Object.assign(array1[0], array2[0]). It's very good for combining objects, so in your case you just need to combine your objects within the array.

Example of code:

var objA = [{"section_name":"abc","id":1},{"section_name":"xyz","id":2}];
var objB = [{"toy":"car","section_id":1},{"tool":"knife","section_id":1},{"weapons":"cutter","section_id":2}];
var objC = Object.assign({},objA[0],objB[0]);

console.log(JSON.stringify(objC));// {"section_name":"abc","id":1,"toy":"car","section_id":1}

For more info, you can refer here: Object.assign()

edited Jul 18 '16 at 09:08

answered Jul 18 '16 at 09:05

Joshua Rajandiran

2,788
7
26
53

wouldn't $.map be faster? – Eunice Chia Jul 18 '16 at 09:05

score 0 · Answer 6 · answered Jul 18 '16 at 09:13

var firstArray = [{"section_name":"abc","id":1},{"section_name":"xyz","id":2}],

 secondArray = [{"toy":"car","section_id":1},{"tool":"knife","section_id":1},{"weapons":"cutter","section_id":2}];

var hash = Object.create(null);
firstArray.forEach(s => {
  hash[s.id] = s;
  s['new_property_name'] = [];
});

secondArray.forEach(i => hash[i['section_id']]['new_property_name'].push(i));

console.log(firstArray);

array map, map array as a key of an array

6 Answers6