Merge the individual elements from multiple arrays to create a final unique array using JavaScript

Question

Merge the individual elements from multiple arrays to create a final unique array using JavaScript

I am working with two data structures:

const arr1 = [["name1", "123", "prop2"],["name2", "43", "prop22"], ["name3", "22", "prop3"]];
const arr2 = [[156, 154, "position report"],[173, 124, "position report"],[136, 154, "position report"]];

I have a specific outcome in mind:

finalArr = [["name1", "123", "prop2",156, 154, "position report], ["name2", "43", "prop22",173, 124, "position report"],["name3", "22", "prop3", 136, 154, "position report"]]

To achieve this, I attempted the following code but it did not fully merge the sub-array elements:

let newArr = [];
arr1.forEach((item) => {
arr2.forEach((element) => {
  newArr.push({ ...item, element });
   });
});

console.log(newArr);

Are there any solutions using only ES6 syntax?

javascript arrays ecmascript-6

Answer 1

Answer №1

If you want to combine two arrays in JavaScript, you can utilize the array.map method to transform the source array. Use the index i to access the corresponding element, and employ the spread operator to merge the arrays together:

const arr1 = [["name1", "123", "prop2"],["name2", "43", "prop22"], ["name3", "22", "prop3"]];
const arr2 = [[156, 154, "position report"],[173, 124, "position report"],[136, 154, "position report"]];

let result = arr1.map((item, i) => [...item, ...arr2[i]]);
console.log(result);

Answer 2

If you want to combine two arrays in JavaScript, you can utilize the array.map method to transform the source array. Use the index i to access the corresponding element, and employ the spread operator to merge the arrays together:

const arr1 = [["name1", "123", "prop2"],["name2", "43", "prop22"], ["name3", "22", "prop3"]];
const arr2 = [[156, 154, "position report"],[173, 124, "position report"],[136, 154, "position report"]];

let result = arr1.map((item, i) => [...item, ...arr2[i]]);
console.log(result);

Answer 3

Answer №2

To reorganize the information, you can create new arrays.

This method is effective even with multiple arrays.

const
    array1 = [["John Doe", "25", "red"],["Jane Smith", "32", "blue"], ["Alex Johnson", "45", "green"]],
    array2 = [[156, 154, "report A"],[173, 124, "report A"],[136, 154, "report A"]],
    result = [array1, array2]
        .reduce((r, a) => a.map((v, i) => [...(r[i] || []), ...v]), []);

console.log(result);

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

Answer 4

To reorganize the information, you can create new arrays.

This method is effective even with multiple arrays.

const
    array1 = [["John Doe", "25", "red"],["Jane Smith", "32", "blue"], ["Alex Johnson", "45", "green"]],
    array2 = [[156, 154, "report A"],[173, 124, "report A"],[136, 154, "report A"]],
    result = [array1, array2]
        .reduce((r, a) => a.map((v, i) => [...(r[i] || []), ...v]), []);

console.log(result);

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

Answer 5

Answer №3

Here's an example of how you can achieve this:

const firstArray = [["item1", "123", "attribute2"],["item2", "43", "attribute22"], ["item3", "22", "attribute3"]];
const secondArray = [[156, 154, "status update"],[173, 124, "status update"],[136, 154, "status update"]];

let resultArray = [];
if (firstArray.length === secondArray.length) {
  for(let index=0; index<firstArray.length; index++){
     resultArray.push([...firstArray[index], ...secondArray[index]]);
  }
}

Answer 6

Here's an example of how you can achieve this:

const firstArray = [["item1", "123", "attribute2"],["item2", "43", "attribute22"], ["item3", "22", "attribute3"]];
const secondArray = [[156, 154, "status update"],[173, 124, "status update"],[136, 154, "status update"]];

let resultArray = [];
if (firstArray.length === secondArray.length) {
  for(let index=0; index<firstArray.length; index++){
     resultArray.push([...firstArray[index], ...secondArray[index]]);
  }
}

Merge the individual elements from multiple arrays to create a final unique array using JavaScript

Answer №1

Answer №2

Answer №3

Similar questions

There seems to be a glitch in the angularjs application

Transferring information among PHP web pages using a list generated on-the-fly

What is causing React Js to fail loading css when switching from anchor tag to link tag?

What could be causing my web application to not properly identify angular.js?

Having trouble getting past the "Starting metro bundler" step when using the 'expo start' or 'npm start' command?

Sorry, but you can only use one 'in' filter in your query

Utilizing Laravel to Showcase Google Maps with Custom Markers Generated from MySQL Data

Trigger an Event Handler only after ensuring the completion of the previous event handling

JavaScript - Unable to unselect a button without triggering a page refresh

Incorporate CSS styling from a separate .css file into a material component

Utilizing IISNode and/or nodemon for efficient node.js development on Windows platform

Creating a unique Nest.js custom decorator to extract parameters directly from the request object

Understanding Express.js API Function Parameters

Server-side Data Fetching with Nuxt.js

Enhance Your Text Areas with Vue.js Filtering

Transmit information via ajax and receive responses in json format

Stopping Angular.js $http requests within a bind() event

What are some techniques for concealing error messages?

The process of displaying custom number buttons on the correct input field in react.js

Tips for retrieving values from numerous checkboxes sharing the same class using jQuery