Merge multiple arrays based on their index using javascript

Question

I need to merge two arrays into a single array. I have code but it is not working as expected-- it is merging them one after another, but I need to interlock the values.

<html>

<head>
    <title></title>
    <script src="https://code.jquery.com/jquery-3.1.1.js"></script>
</head>

<body>
    <div id="result"></div>
    <script type="text/javascript">
    var array1 = [1, 2, 3, 4];
    var array2 = ["a", "b", "c", "d"];
    var newArray = $.merge(array1, array2);
    $("#result").html(newArray);
    //the result its 1234absd
    //ineed result like 1a,2b,3c,4d
    </script>
</body>

</html>

if you need to merge more than 2 arrays in this way, i've created a function in my answer below — Yogesh Mistry, Apr 02 '17 at 17:48

Nenad Vracar · Accepted Answer · 2017-04-02T16:56:55.637

25

You can use Array#map in plain javascript.

var array1 = [1, 2, 3, 4];
var array2 = ["a", "b", "c", "d"];

var newArray = array1.map((e, i) => e + array2[i]);
console.log(newArray);

If you use map on array1 then first parameter is current value of array1 in loop and the second parameter is index of that element in array. So you can match current element in array1 with elements from other arrays with the same index using index.

var array1 = [1, 2, 3, 4];
var array2 = ["a", "b", "c", "d"];
var array3 = ["f", "d", "s", "a"];

var newArray = array1.map(function(value, index) {
  return value + array2[index] + array3[index];
});
console.log(newArray);

edited Apr 02 '17 at 16:56

answered Apr 02 '17 at 16:43

Nenad Vracar

118,580
15
151
176

its work good thank you bur can you please explain the function . and i.e i need 3 or 4 arrays to margin all together with yhis function and again thank you very match. – Shabi Levi Apr 02 '17 at 16:49
Do all arrays have the same length? – Nenad Vracar Apr 02 '17 at 16:51
this solution is fixed to the count of arrays, which is not as versatile as it could be. – Nina Scholz Apr 02 '17 at 17:03

Nina Scholz · Answer 2 · 2017-04-02T17:37:12.747

You could use Array#reduce and Array#map for an arbitrary count of arrays with same length.

var a1 = [1, 2, 3, 4],
    a2 = ["a", "b", "c", "d"],
    a3 = [9, 8, 7, 6],
    a4 = ["z", "y", "x", "w"],
    result = [a1, a2, a3, a4].reduce((a, b) => a.map((v, i) => v + b[i]));

console.log(result);

ES5

var a1 = [1, 2, 3, 4],
    a2 = ["a", "b", "c", "d"],
    a3 = [9, 8, 7, 6],
    a4 = ["z", "y", "x", "w"],
    result = [a1, a2, a3, a4].reduce(function (a, b) {
        return a.map(function (v, i) {
            return v + b[i];
        });
    });

console.log(result);

NVRM · Answer 3 · 2022-05-16T16:36:17.907

Just a little variation note, to merge by index in an array multiple, to create an associative array of values.

const a = [1, 2, 3, 4],
      b = [34, 54, 54, 43]

console.log(
  a.map((e,i) => [e,b[i]])
)

Then later, to search for the closest match from a given value. On this example, searching for the best associated value for 3.7:

const a = [1, 2, 3, 4],
      b = [34, 54, 54, 43],
      c = a.map((e,i) => [e,b[i]]),
      search = 3.7,
      temp = [];
      
c.forEach(function(e){
  temp.push(e[0])
})

const seek = temp.reduce((m, n) => (Math.abs(n-search) < Math.abs(m-search) ? n : m))

const index = c.findIndex((s) => s.indexOf(seek) !== -1)
console.log(c[index][1])

This is not exactly how behave an object.

For example, identical index entries aren't merged but are holding their associated values in a new entry (duplicate index), we can roll Math from the index, and create transformation matrix. We can use any column as index and search both way.

score 1 · Answer 4 · edited May 23 '17 at 11:46

1

You can use a combination of reduce and concat (source):

var array1 = [1, 2, 3, 4];
var array2 = ["a", "b", "c", "d"];
var newArray = array1.reduce(function(prev, curr) {
  return prev.concat(curr, array2[prev.length / 2]);
}, []);
$("#result").html(newArray);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="result"></div>

edited May 23 '17 at 11:46

Community

1
1

answered Apr 02 '17 at 16:47

Himanshu

490
1
8
17

score 1 · Answer 5 · answered Apr 02 '17 at 18:20

Well actually JavaScript lacks a .zip() functor which would be very handy for exactly what you are trying to do. Lets invent it;

Array.prototype.zip = function(a){
 return this.map((e,i) => typeof e === "object" || typeof a[i] === "object" ? [e,a[i]] : e+a[i]);
};

var arrays = [[1, 2, 3, 4],
              ["a", "b", "c", "d"],
              [9, 8, 7, 6],
              ["z", "y", "x", "w"],
              [[1,2,3],[4,5,6],[7,8,9],[10,11,12]]
             ],
result = arrays.reduce((p,c) => p.zip(c));
console.log(result);

Yogesh Mistry · Answer 6 · 2017-04-02T17:25:01.740

In case someone needs to merge any number of arrays (with fixed length) in the way mentioned above in the post, following function will be useful

console.clear();
var array1 = ["a1", "b1", "c1", "d1"];
var array2 = ["a2", "b2", "c2", "d2"];
var array3 = ["a3", "b3", "c3", "d3"];
var array4 = ["a4", "b4", "c4", "d4"];

function mergeElementsAtIndex(one_or_more_arrays){
    const total_arr = arguments.length;
    newArray = arguments[0].map((v, k) => {
   var temp_val = v;
        for(var i=1; i < total_arr; i++){
         temp_val += arguments[i][k];
        }
        return temp_val;
    });
    return newArray;
}
merged_array = mergeElementsAtIndex(array1, array2, array3, array4);
console.log(merged_array);

.as-console-wrapper { max-height: 100% !important; top: 0; }

score 0 · Answer 7 · answered Apr 10 '17 at 20:53

0

var array1 = [1, 2, 3, 4];
var array2 = ["a", "b", "c", "d"];
var array3 = ["f", "d", "s", "a"];

var newArray = array1.map(function(value, index) {
  return value + array2[index] + array3[index];
});
console.log(newArray);

answered Apr 10 '17 at 20:53

Shabi Levi

248
1
2
13

Merge multiple arrays based on their index using javascript

7 Answers7

Linked

Related