How to combine arrays using javascript

Question

How can I combine test1 and test2 to get the same result as test? I found concat() and join() can do the combination but can't get the result I want.

  var test1 = [1,5,7,4]
    var test2 = ["apple","banana","apple","banana"]
    var test = [
       {xValue:1,yValue:"apple"},
       {xValue:5,yValue:"banana"},
       {xValue:7,yValue:"apple"},
       {xValue:4,yValue:"banana"}
    ]
console.log(test);
console.log(test1);
console.log(test2);

I have 21 arrays with hundreds of length for each one in my real case. I am trying to combine them together and get the result like the example above. Thanks!!

Are test1 length and test2 length always equal?

Kyll
– Kyll

2015-12-11 02:19:43 +00:00
Commented Dec 11, 2015 at 2:19 — Kyll
– Kyll, Commented Dec 11, 2015 at 2:19
Yes. The same length.

yxz122930
– yxz122930

2015-12-11 02:20:07 +00:00
Commented Dec 11, 2015 at 2:20 — yxz122930
– yxz122930, Commented Dec 11, 2015 at 2:20

RobG · Accepted Answer · 2015-12-11 02:30:15Z

1

In the case where you want to create a new array from existing, map and reduce are candidates, e.g.

var test1 = [1,5,7,4]
var test2 = ["apple","banana","apple","banana"]

var test = test1.map(function(v, i){
             return {xValue:v, yValue: test2[i]};
           });

document.write(JSON.stringify(test))

var test2 = test1.reduce(function(acc, v, i) {
              acc.push({xValue:v, yValue: test2[i]});
              return acc;
            }, [])

document.write('<br><br>' + JSON.stringify(test2))

answered Dec 11, 2015 at 2:30

RobG

148k32 gold badges180 silver badges216 bronze badges

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

3 Comments

user663031 Over a year ago

But I don't understand why you would suggest using reduce for what is exactly a mapping operation.

RobG Over a year ago

Because it can be used for that. In this case, map probably suits better but that may not always be the case. ;-)

RobG Over a year ago

@torazaburo—because it can be used for that. In this case, map probably suits better but that may not always be the case. ;-)

slebetman · Accepted Answer · 2015-12-11 02:45:20Z

1

It is for this reason I wrote the libraries array.and and array.stride. Both are very small pieces of code that can run on both the browser and node.js that add the features of merging arrays and iterating an array by more than one item at a time. These functionality are available in other languages as zip/unzip (or in the case of tcl, foreach, which can do both zipping and unzipping).

[].and() merges two arrays into a single array:

[1,2].and(['a','b']); // returns [1,'a',2,'b']

[].stride() is like foreach but can iterate multiple items each loop:

[1,2,3,4].stride(function(a,b){
    console.log(a,b); // logs 1,2 then 3,4
});

Using them together you can write very readable and obvious code to get what you want:

var test = test1.and(test2).stride(function(x,y){
    return {xValue:x, yValue:y};
});

answered Dec 11, 2015 at 2:45

slebetman

115k19 gold badges147 silver badges180 bronze badges

1 Comment

slebetman Over a year ago

These are the only missing array operations currently in javascript. They're not even proposed for the ES7 spec. If anyone know how to get proposals into ES standards give me a shout. Or propose these yourself.

Lucas Rodriguez · Accepted Answer · 2015-12-11 02:24:34Z

0

Try this:

var test = [];
for (i = 0; i < test1.length; i++) { 
    test.push({xvalue:test1[i], yvalue:test2[i]});
}

console.log(test)

answered Dec 11, 2015 at 2:24

Lucas Rodriguez

1,2036 silver badges15 bronze badges

Comments

Prahlad Yeri · Accepted Answer · 2015-12-11 04:15:05Z

0

Here is what I would do if I were you:

        var test1 = [1,5,7,4];
            var test2 = ["apple","banana","apple","banana"];
        var test = test1.map(function(v,i){
               return {"xValue":v,"yValue":test2[i]};
         });
        document.write(JSON.stringify(test));
        document.write(test);
        document.write(test1);
        document.write(test2);

Try it!

answered Dec 11, 2015 at 4:15

Prahlad Yeri

3,7015 gold badges30 silver badges70 bronze badges

Comments

Murat Ozgul · Accepted Answer · 2015-12-11 02:27:42Z

-1

var zippedArray = Array.apply(null, {length: test1.length}).map(function (e, i) {
    var obj = {
      xVal: test1[i],
      yVal: test2[i]
    };
    return obj;
});

answered Dec 11, 2015 at 2:27

Murat Ozgul

11.9k6 gold badges32 silver badges33 bronze badges

5 Comments

RobG Over a year ago

The expression Array.apply(null, {length: test1.length}) can be replaced with the much simpler Array(test1.length). However, it's not considered a good idea to use the Array constructor that way as it can lead to difficult to find bugs.

slebetman Over a year ago

Uh... why not just test1.map()? You do know that map doesn't modify the existing array don't you?

Murat Ozgul Over a year ago

why not just test1.map() -> So he can use it for different lengths also (more generic answer). He said he has "21 arrays with hundreds of length". Assuming every array has the same length or the desired length can lead to unexpected behavior

user663031 Over a year ago

So he can use it for different lengths also. I don't understand this. What you have written is exactly equivalent to test.map`.

Murat Ozgul Over a year ago

no. how is it exactly test.map or test1.map. you can use a specific length like 5. when answering questions you think the person only needs the working code. in reality he needs to "understand" (also other people with similar problems viewing this code). So it is better to use generic stuff in the answer for people to understand and find different ways to achieve similar results.

Collectives™ on Stack Overflow

How to combine arrays using javascript

5 Answers 5

3 Comments

1 Comment

Comments

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

1 Comment

Comments

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related