Combining two multidimensional arrays in JavaScript without altering the original arrays

Question

Combining two multidimensional arrays in JavaScript without altering the original arrays

Having trouble merging two complex arrays? Let's simplify it for you:

var array1 = [['email1', object1],['email2', object2],['email3', object3],['email4',object4]]
var array2 = [['email1',[['a1','b1']]],['email3',[['a3','b3']]], ['email4',[['a4','b4'],['a4a','b4a']]]

All you need to do is merge them by email, eliminating duplicates in the process:

var mergedarray = 
[['email1', object1, [['a1', 'b1']]],['email2', object2],['email3', object3, ['a3', 'b3']],['email4',object4,[['a4','b4'],['a4a','b4a']]]]

No need to overthink those multi-dimensions! Need any help with this?

javascript arrays multidimensional-array

Answer 1

Answer №1

   const emailHash = new Map();

   for(const [userEmail, ...otherData] of [...firstArray, ...secondArray]) {
     if(emailHash.has(userEmail)) {
       emailHash.get(userEmail).push(...otherData);
     } else {
        emailHash.set(userEmail, [userEmail, ...otherData]);
    }
  }

  const finalResult = [...emailHash.values()];

Answer 2

   const emailHash = new Map();

   for(const [userEmail, ...otherData] of [...firstArray, ...secondArray]) {
     if(emailHash.has(userEmail)) {
       emailHash.get(userEmail).push(...otherData);
     } else {
        emailHash.set(userEmail, [userEmail, ...otherData]);
    }
  }

  const finalResult = [...emailHash.values()];

Answer 3

Answer №2

Implement a Map using the elements in array2 to improve search speed. Then utilize Array.prototype.map on the first array or vice versa.

var array1 = [['email1', 'object1'], ['email2', 'object2'], ['email3', 'object3'], ['email4', 'object4']]
var array2 = [['email1', [['a1', 'b1']]], ['email3', [['a3', 'b3']]], ['email4', [['a4', 'b4'], ['a4a', 'b4a']]]]

let map2 = new Map(array2);

let out = array1.map(([key, val]) => [key, val, map2.get(key) || []]);
console.log(out)

Answer 4

Implement a Map using the elements in array2 to improve search speed. Then utilize Array.prototype.map on the first array or vice versa.

var array1 = [['email1', 'object1'], ['email2', 'object2'], ['email3', 'object3'], ['email4', 'object4']]
var array2 = [['email1', [['a1', 'b1']]], ['email3', [['a3', 'b3']]], ['email4', [['a4', 'b4'], ['a4a', 'b4a']]]]

let map2 = new Map(array2);

let out = array1.map(([key, val]) => [key, val, map2.get(key) || []]);
console.log(out)

Answer 5

Answer №3

To iterate over the second array and validate if the first element is present in any of the arrays within the first array, you can then append the second element if the condition is met:

const firstArray = [['item1', 'data1'],['item2', 'data2'],['item3', 'data3'],['item4','data4']]
const secondArray = [['item1',[['param1','value1']]],['item3',[['param3','value3']]], ['item4',[['param4','value4'],['param4a','value4a']]]]

secondArray.forEach((sArr, idx) => {
  firstArray.map((fArr, fIdx) => {
    if (fArr[0] == sArr[0]) {
      firstArray[fIdx].push(secondArray[idx][1])
    }
  })
})

console.log(firstArray)

Answer 6

To iterate over the second array and validate if the first element is present in any of the arrays within the first array, you can then append the second element if the condition is met:

const firstArray = [['item1', 'data1'],['item2', 'data2'],['item3', 'data3'],['item4','data4']]
const secondArray = [['item1',[['param1','value1']]],['item3',[['param3','value3']]], ['item4',[['param4','value4'],['param4a','value4a']]]]

secondArray.forEach((sArr, idx) => {
  firstArray.map((fArr, fIdx) => {
    if (fArr[0] == sArr[0]) {
      firstArray[fIdx].push(secondArray[idx][1])
    }
  })
})

console.log(firstArray)

Answer 7

Answer №4

Having struggled to implement the given advice (likely due to my limited skill level), I resorted to transforming arrays into objects in order to assign key-value pairs. As a result, the new data structure looked like this:

var array1 = [{email:'email1', obj:object1, data:[]},{email:'email2', obj:object2, data:[]},{email:'email3', obj:object3, data:[]},{email:'email4',obj:object4, data:[]}];
var array2 = [{email:'email1',data:[{'a1','b1'}]},{email:'email3',data:[{'a3','b3'}]}, {email:'email4',data:[{'a4','b4'}]},{email:'email4',data:[{'a4a','b4a'}]}];

Subsequently, I utilized a loop to transfer object data from one array to another:

 for (var x in array1) {
    var res = array1[x].email;

    for (var z in array2) {
      var cod = array2[z].email;
      var q = 0;
      if (res == cod) {
        array1[x].data.push(array2[z].data[0]);
        q++;
      }

    }
  }

The end outcome is as follows:

var array1 = [{email:'email1',obj:object1,data:[{'a1','b1'}]},{email:'email2',obj:object2,data:[]},{email:'email3',data:[{'a3','b3'}]},{email:'email4',obj:object4,data:[{'a4','b4'},{'a4a','b4a'}]}];

Answer 8

Having struggled to implement the given advice (likely due to my limited skill level), I resorted to transforming arrays into objects in order to assign key-value pairs. As a result, the new data structure looked like this:

var array1 = [{email:'email1', obj:object1, data:[]},{email:'email2', obj:object2, data:[]},{email:'email3', obj:object3, data:[]},{email:'email4',obj:object4, data:[]}];
var array2 = [{email:'email1',data:[{'a1','b1'}]},{email:'email3',data:[{'a3','b3'}]}, {email:'email4',data:[{'a4','b4'}]},{email:'email4',data:[{'a4a','b4a'}]}];

Subsequently, I utilized a loop to transfer object data from one array to another:

 for (var x in array1) {
    var res = array1[x].email;

    for (var z in array2) {
      var cod = array2[z].email;
      var q = 0;
      if (res == cod) {
        array1[x].data.push(array2[z].data[0]);
        q++;
      }

    }
  }

The end outcome is as follows:

var array1 = [{email:'email1',obj:object1,data:[{'a1','b1'}]},{email:'email2',obj:object2,data:[]},{email:'email3',data:[{'a3','b3'}]},{email:'email4',obj:object4,data:[{'a4','b4'},{'a4a','b4a'}]}];

Combining two multidimensional arrays in JavaScript without altering the original arrays

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Create a Rest API and implement server-side rendering concurrently using SailsJs

Guide to utilizing Terser in conjunction with webpack

JavaScript event listener 'click' not functioning properly

Tips for shutting a window

Ensuring multiple checkboxes are selected is essential; failure to check at least one will result in an error message being

Greetings Universe in angular.js

Error encountered: "Unexpected token export" when using jQuery 3.2.1 with the latest Autonumeric Plugin

What is the best method for retrieving the chosen value from a <select> element?

Using Ajax to set the file target dynamically

Give a jQuery Mobile flipswitch a new look

Is there a way to continuously make changes to my MEAN stack code without needing to constantly restart `npm start`?

Puppeteer throwing an error when querying selectors cannot be done (TypeError: selector.startsWith is not a supported function)

How can I update the source of an HTML video element seamlessly without causing any glitches?

Retrieve values from an array of objects using their corresponding keys

What is the best way to navigate through a JavaScript array?

Exploring the world of C-style arrays through Boost Hana

Using popsicle with Node.js to handle asynchronous operations and promises

Building an array of objects using a foreach loop

`Creating a fluid MySQL table using JavaScript`

When utilizing the AWS JavaScript SDK, the request header is missing the HTTP_X_CSRF_TOKEN