manipulating arrays in javascript

Question

I have two arrays like so

var arr1 = ["1", "2", "3", "4"];
var arr2 = [["a", "b", "c", "d"], ["e", "f", "g", "h"], ["i", "j", "k", "l"], ["m", "n", "o", "p"], ["q", "r", "s", "t"]];

What I would like to do is merge the two arrays to form a final output that looks like this

var newArr = [{1: "a", 2: "b", 3: "c", 4: "d"}, {1: "e", 2: "f", 3: "g", 4: "h"}, {1: "i", 2: "j", 3: "k", 4: "l"}, {1: "m", 2: "n", 3: "o", 4: "p"}, {1: "q", 2: "r", 3: "s", 4: "t"}];

So effectively take each array out of the second array and then merge it with the first array to form an object.

I was just wandering what the most efficient way to do this in javascript would be?

Any help would be much appreciated

Thanks for your time

what the most efficient way to do this.. It depends on what you exactly mean by "efficient". If you mean speed, then obviously the only way is iterating through arrays. If you mean readabilty, I would suggest to use utility library such as Underscore. — hindmost
– hindmost, Commented Apr 21, 2016 at 12:29
@hindmost I suppose I meant the best way to achieve my desired outcome — BeeNag
– BeeNag, Commented Apr 21, 2016 at 12:32
@BeeNag "the best way" is always opinion-based thing. That's why you need clarify the "efficiency". Otherwise it would look like off-topic. — hindmost
– hindmost, Commented Apr 21, 2016 at 12:33
It looks like zipping. Check lodash's zipObject function lodash.com/docs#zipObject — marzelin
– marzelin, Commented Apr 21, 2016 at 12:39

Bartek Banachewicz · Accepted Answer · 2016-04-21 13:01:47Z

1

Assuming the input always matches, I'd start with arr2:

arr2.map(x =>

However, at this point what you want is to zip values from x and the corresponding values from y together, so let's introduce a helper first (I'm actually gonna call it zipKeyVal¹ because it maps values from first param to keys, and the second to values).

function zipKeyVal(keys,values) {
    var result = {};
    for (var i = 0; i < keys.length; i++) {
        result[keys[i]] = values[i];
    }
    return result;
}

With that, our solution becomes:

var newArr = arr2.map(x => zipKeyVal(arr1, x));

¹_{Oh, apparently underscore.js calls that _.object, and lodash zipObject.}

edited Apr 21, 2016 at 13:01

answered Apr 21, 2016 at 12:34

Bartek Banachewicz

39.5k8 gold badges100 silver badges141 bronze badges

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

4 Comments

Andy Over a year ago

Nice functional approach.

Andy Over a year ago

Also, If you return a function from zipKeyVal you can simply do var newArr = arr2.map(zipKeyVal(arr1));

Bartek Banachewicz Over a year ago

@Andy I guess curried functions aren't really used a lot in the JS world.

BeeNag Over a year ago

Whilst all the answers provided work I am selecting this one as the correct answer as I like the approach.

Nina Scholz · Accepted Answer · 2016-04-21 12:30:48Z

1

You could use some array methods like Array#map and Array#forEach.

var arr1 = ["1", "2", "3", "4"],
    arr2 = [["a", "b", "c", "d"], ["e", "f", "g", "h"], ["i", "j", "k", "l"], ["m", "n", "o", "p"], ["q", "r", "s", "t"]],
    newArr = arr2.map(function (a) {
        var o = {};
        arr1.forEach(function (b, i) {
            o[b] = a[i];
        });
        return o;
    });

document.write('<pre>' + JSON.stringify(newArr, 0, 4) + '</pre>');

answered Apr 21, 2016 at 12:30

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

Comments

Francesco Pezzella · Accepted Answer · 2016-04-21 12:35:50Z

1

Using Underscore:

var newArr = _.map(arr2, function(arr) {
    return _.object(arr1, arr);
});

answered Apr 21, 2016 at 12:35

Francesco Pezzella

1,7952 gold badges15 silver badges21 bronze badges

1 Comment

Bartek Banachewicz Over a year ago

With the ES6 syntax this gets the cleanest one-liner: _.map(arr2, arr => _.object(arr1, arr));

isvforall · Accepted Answer · 2016-04-21 12:58:23Z

1

You could use two map functions and some ES6 features:

var newArr = arr2.map(el => el.map((e, i) => ({ [arr1[i]]: e })));

Working example:

var arr1 = ["1", "2", "3", "4"];
var arr2 = [ ["a", "b", "c", "d"], ["e", "f", "g", "h"], ["i", "j", "k", "l"], ["m", "n", "o", "p"], ["q", "r", "s", "t"] ];

var newArr = arr2.map(el => el.map((e, i) => ({ [arr1[i]]: e })));

document.write('<pre>' + JSON.stringify(newArr, 0, 2) + '</pre>');

edited Apr 21, 2016 at 12:58

answered Apr 21, 2016 at 12:32

isvforall

8,9166 gold badges39 silver badges52 bronze badges

Collectives™ on Stack Overflow

manipulating arrays in javascript

4 Answers 4

4 Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related