How to merge 2 javascript objects into an array?

Question

I have objects like this:

{ "aa": "11", "bb" : "22", "cc" : "33" }
{ "aa": "text1", "bb" : "text2", "cc" : "text3" }

I need to merge these to become this array

[ ["text1", "11"], ["text2", "22"], ["text3", "33"] ]

Is there an easy way to do this?

I know I can do this with a couple loops of course, but is there an easier way? — trashrobber, May 02 '14 at 04:09
define "easier". Is 3 lines solution with loops "complicated" for you? — zerkms, May 02 '14 at 04:11
`AnArray = [{Objectname: ObjectValue, Objectname2: ObjectValue2},{Objectname: ObjectValue, Objectname2, ObjectValue2}];` Then: `AnArray[Index#].Objectname1`(or 2 or whatever you use for Object Name) Do you mean like this example Object Array? — Brendan, May 02 '14 at 04:12
I guess i was hoping for something like python zip, but a simple loop would work fine. Thanks — trashrobber, May 02 '14 at 04:15
@trashrobber: there is no built-in zip, but in my solution I used one :-) — zerkms, May 02 '14 at 04:15

score 5 · Answer 1 · edited May 23 '17 at 12:11

5

Here is some JS FP just for fun:

var o1 = { "aa": "11", "bb" : "22", "cc" : "33" },
    o2 = { "aa": "text1", "bb" : "text2", "cc" : "text3" };

var values = function(obj) {
    return Object.keys(obj).map(function(key) {
        return obj[key];
    });
};

function zip(arrays) {
    return arrays[0].map(function(_,i){
        return arrays.map(function(array) {
            return array[i];
        });
    });
}

var zipped = zip([
    values(o1),
    values(o2)
]);

console.log(zipped);

http://jsfiddle.net/q3P2h/

PS: zip function implementation borrowed at https://stackoverflow.com/a/10284006/251311

edited May 23 '17 at 12:11

Community

1
1

answered May 02 '14 at 04:12

zerkms

249,484
69
436
539

Thanks for the posting zip implementation, that will be useful anyway. I accepted the other answer though because it is simpler. – trashrobber May 02 '14 at 04:27
@zerkms what does the `function(_,i)` means ? – Dileep May 02 '14 at 04:33
@Dileep: it's an anonymous function that accepts 2 arguments: 1st is with `_` name, second is with `i`. Keeping in mind `.map()` passes the value and the key - the former one will be the value, the second is the key. `_` is just a "conventional" name for an argument to be discarded - you may have noticed it's not used, but only `i`. And as soon as we need `i` - we cannot omit the first argument hence need to give it some name. PS: ask if my tangled description is hard to get :-) – zerkms May 02 '14 at 04:37
@zerkms Dude you got some supercomputer in your head..!! Took a while understand but the logic is awesome ;-) – Dileep May 02 '14 at 05:01
@Dileep: it's not me - I borrowed it (and put a credit for it) at http://stackoverflow.com/a/10284006/251311 But it's "simple" to reinvent it anyway isn't it? – zerkms May 02 '14 at 05:01
@zerkms Once you get the logic its very simple !! :) – Dileep May 02 '14 at 05:06

thefourtheye · Accepted Answer · 2014-05-02T04:28:04.180

var objects = [{
    "aa": "11",
    "bb": "22",
    "cc": "33"
}, {
    "aa": "text1",
    "bb": "text2",
    "cc": "text3"
}];
var result = [];
for (var key in objects[1]) {
    result.push([objects[1][key], objects[0][key]]);
}
console.log(result);
# [ [ 'text1', '11' ], [ 'text2', '22' ], [ 'text3', '33' ] ]

Or

console.log(Object.keys(objects[1]).map(function(key) {
    return [objects[1][key], objects[0][key]];
}));
# [ [ 'text1', '11' ], [ 'text2', '22' ], [ 'text3', '33' ] ]

If you had the objects in two different variables, like this

var o1 = { "aa": "11", "bb" : "22", "cc" : "33" },
    o2 = { "aa": "text1", "bb" : "text2", "cc" : "text3" };

then

console.log(Object.keys(o2).map(function(key) {
    return [o2[key], o1[key]];
}));
# [ [ 'text1', '11' ], [ 'text2', '22' ], [ 'text3', '33' ] ]

Avishek · Answer 3 · 2014-05-02T04:29:28.083

1

An easier way could be :

var a = { "aa": "11", "bb": "22", "cc": "33" };
var b = { "aa": "text1", "bb": "text2", "cc": "text3" };
var c=[];
$.each(a, function (index, value) {
    c.push(a[index], b[index]);
});

PS: Using jQuery.

edited May 02 '14 at 04:29

answered May 02 '14 at 04:18

Avishek

1,896
14
33

1. what is `$`? 2. `{}` doesn't have `push` method – zerkms May 02 '14 at 04:18
Still, what the heck is `$`? – zerkms May 02 '14 at 04:21
are you using jquery or only javascript? – Avishek May 02 '14 at 04:22
1

I'm not an OP. And there is no any `jquery` in question tags. If third party libraries were allowed - it would be one line solution: `_.zip` (http://underscorejs.org/#zip) – zerkms May 02 '14 at 04:22
$ is the jquery object – Avishek May 02 '14 at 04:24
I know it. And `_` is an underscore object. The question is presumably about pure js :-) – zerkms May 02 '14 at 04:25
i think its up to the OP to decide whether to opt for jquery or not. he wanted a quick solution. i gave him that. – Avishek May 02 '14 at 04:26
@zerkms thanks for pointing out underscore.js! very good stuff. – trashrobber May 02 '14 at 04:32

score 0 · Answer 4 · answered May 02 '14 at 04:39

Folks Try this one. Hope so it will work for you.

    var x = { "aa": "11", "bb" : "22", "cc" : "33" }
    var y = { "aa": "text1", "bb" : "text2", "cc" : "text3" }

    var a = [];

    var b = [];

    for(var k in x){ a.push(k);}

    for(var i = 0; i<a.length;i++){
    var c = [];
    c.push(x[a[i]]);
    c.push(y[a[i]]);
    b.push(c);
    c = [];





    }

console.log(b);

Thanks and regards.

How to merge 2 javascript objects into an array?

4 Answers4