Javascript: How to Join/Combine Two Arrays to Concatenate into One Array

JavaScript: How to join / combine two arrays to concatenate into one array?

var a = ['a','b','c'];
var b = ['d','e','f'];
var c = a.concat(b); //c is now an an array with: ['a','b','c','d','e','f']
console.log( c[3] ); //c[3] will be 'd'

What is the most efficient way to concatenate N arrays?

If you're concatenating more than two arrays, concat() is the way to go for convenience and likely performance.

var a = [1, 2], b = ["x", "y"], c = [true, false];
var d = a.concat(b, c);
console.log(d); // [1, 2, "x", "y", true, false];

For concatenating just two arrays, the fact that push accepts multiple arguments consisting of elements to add to the array can be used instead to add elements from one array to the end of another without producing a new array. With slice() it can also be used instead of concat() but there appears to be no performance advantage from doing this.

var a = [1, 2], b = ["x", "y"];
a.push.apply(a, b);
console.log(a); // [1, 2, "x", "y"];

In ECMAScript 2015 and later, this can be reduced even further to

a.push(...b)

However, it seems that for large arrays (of the order of 100,000 members or more), the technique passing an array of elements to push (either using apply() or the ECMAScript 2015 spread operator) can fail. For such arrays, using a loop is a better approach. See https://stackoverflow.com/a/17368101/96100 for details.

How to merge two arrays in JavaScript and de-duplicate items

To just merge the arrays (without removing duplicates)

ES5 version use Array.concat:

var array1 = ["Vijendra", "Singh"];
var array2 = ["Singh", "Shakya"];

array1 = array1.concat(array2);

console.log(array1);

Merge/flatten an array of arrays

---

ES2019

ES2019 introduced the Array.prototype.flat() method which you could use to flatten the arrays. It is compatible with most environments, although it is only available in Node.js starting with version 11, and not at all in Internet Explorer.

const arrays = [
      ["$6"],
      ["$12"],
      ["$25"],
      ["$25"],
      ["$18"],
      ["$22"],
      ["$10"]
    ];
const merge3 = arrays.flat(1); //The depth level specifying how deep a nested array structure should be flattened. Defaults to 1.
console.log(merge3);
    

Merge 2 arrays of objects but concat arrays if properties has the same value

You are correct in that Lodash's mergeWith doesn't merge recursively. You can manage this yourself manually.

1. First iterate the first array and generate a map object by the name property.
2. Then iterate the second array and check if the name property
   matches, and if so, recursively call the merge function to merge
   the two nested arrays from source and target arrays, otherwise, add
   the second array's element to the object map.
3. Finally, convert the
   map object back to an array of the merged values.

Code:

const merge = (sourceArr, targetArr) => {
  // (1) generate lookup map
  const objMap = sourceArr.reduce((map, curr) => {
    return {
      ...map,
      [curr.name]: curr
    };
  }, {});

  // (2) Merge objects, recurse on items arrays
  targetArr.forEach((obj) => {
    if (objMap[obj.name]) {
      objMap[obj.name].items = merge(objMap[obj.name].items, obj.items);
    } else {
      objMap[obj.name] = obj;
    }
  });

  // (3) Return merged values array
  return Object.values(objMap);
};

const sourceObj = [
  {
    items: [
      { items: [{ id: "0", name: "z" }], name: "m" },
      { items: [{ id: "2", name: "q" }], name: "l" }
    ],
    name: "c"
  },
  {
    items: [{ items: [{ id: "4", name: "-" }], name: "v" }],
    name: "d"
  }
];

const targetObj = [
  {
    items: [
      { items: [{ id: "1", name: "d" }], name: "m" },
      { items: [{ id: "3", name: "b" }], name: "j" }
    ],
    name: "c"
  }
];

const merge = (sourceArr, targetArr) => {
  const objMap = sourceArr.reduce((map, curr) => {
    return {
      ...map,
      [curr.name]: curr
    };
  }, {});

  targetArr.forEach((obj) => {
    if (objMap[obj.name]) {
      objMap[obj.name].items = merge(objMap[obj.name].items, obj.items);
    } else {
      objMap[obj.name] = obj;
    }
  });

  return Object.values(objMap);
};

const res = merge(sourceObj, targetObj);

console.log(res);

Merge two arrays in a sequential and structured way

Let me know if something is unclear in this solution, should be self explanatory.

It uses index of first array in loop to fetch item from 2nd array and push to new array.

//FinalARRAY = [[45.4668729,9.1907501],[44.8013268,10.3278351],[45.4384958,10.9924122]];

var lat = [
  [45.4668729, 44.8013268, 45.4384958]
];
var lng = [
  [9.1907501, 10.3278351, 10.9924122]
];

var finalArray = []

lat[0].forEach((i, index)=>{
  finalArray.push([i,lng[0][index]])
})

console.log(finalArray)

Merge items from two arrays based on matching ID

You can use Array.prototype.map(), find, filter, slice, reduce, concat, includes and Object.assign().

This solution:

• Handles arbitrary ordering of the items. The order is read from the headers.
• Appends a Balance field only if there is one present in data2.
• Joins all other fields (requested by OP, see comments below).
• Takes default values as an input and uses them if the data is not present in data1 and data2.

function merge({ data1, data2 }, defaults) {  // get the final headers, add/move 'Balance' to the end  const headers = [...data1[0].filter(x => x !== 'Balance')]    .concat(data2[0].includes('Balance') ? ['Balance'] : []);    // map the data from data1 to an array of objects, each key is the header name, also merge the default values.  const d1 = data1.slice(1)    .map(x => x.reduce((acc, y, i) => ({ ...defaults, ...acc, [data1[0][i]]: y }), {}));  // map the data from data2 to an array of objects, each key is the header name  const d2 = data2.slice(1)    .map(x => x.reduce((acc, y, i) => ({ ...acc, [data2[0][i]]: y }), {}));    // combine d1 and d2  const output = d1.map((x, i) => { // iterate over d1    // merge values from d2 into this value    const d = Object.assign(x, d2.find(y => y['ID'] === x['ID']));    // return an array ordered according to the header    return headers.map(h => d[h]);  });  return { output: [headers, ...output] };}
const test0 = {  data1: [[ "ID","name","Birthday","other"],["10","thomas","1992-03-17","empty"],["11","Emily","2000-03-03","empty"]],  data2: [["other", "ID", "Balance", "city"],["hello", "10", "$4500", "New York"],["world", "10","$8","Brazil"]]};
const test1 = {  data1: [["ID","name","Birthday"],["10","thomas","1992-03-17"],["11","Emily","2000-03-03"]],  data2: [["other","ID"],["x","10"],["y","11"]]};
console.log(merge(test0, { Balance: '$0' }));console.log(merge(test1, { Balance: '$0' }));

---

Related Topics