[SOLVED] Merge multiple arrays based on their index using javascript

Merge multiple arrays based on their index using javascript

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>

Solution

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);