Merge the contents of three arrays into a single array

Question

Merge the contents of three arrays into a single array

I am seeking a more streamlined method to merge these three arrays: two data arrays and a "cross" array that connects them.

3 Arrays

var drives = [
        {"drivesId": "rwd", "name": "RWD"},
        {"drivesId": "fwd", "name": "FWD"},
        {"drivesId": "awd", "name": "AWD"}
    ]

    var cars = [
        {"carId": "civic", "name": "Civic"},
        {"carId": "wrx", "name": "WRX"},
        {"carId": "mustang", "name": "Mustang"},
        {"carId": "focus", "name": "Focus"},
    ]

    var drivesXcars = [
        {"drivesXcars": "uid1", "carId": "civic", "drivesId": "fwd"},
        {"drivesXcars": "uid2", "carId": "wrx", "drivesId": "awd"},
        {"drivesXcars": "uid3", "carId": "mustang", "drivesId": "rwd"},
        {"drivesXcars": "uid4", "carId": "focus", "drivesId": "fwd"},
    ]

I aim to consolidate them into a single array structured like this:

var carsComplete = [
        {"drivesId": "fwd", "driveName": "FWD", "cars": [
            {"carId": "civic", "name": "Civic"},
            {"carId": "focus", "name": "Focus"}
        ]},
        {"drivesId": "rwd", "driveName": "RWD", "cars": [
            {"carId": "mustang", "name": "Mustang"}
        ]},
        {"drivesId": "awd", "driveName": "AWD", "cars": [
            {"carId": "wrx", "name": "WRX"}
        ]},
    ]

While I could achieve this using the standard for loop approach, I am looking for a more efficient solution as these arrays grow in size. The traditional "brute force" method doesn't suffice for me anymore.

If anyone knows of a more efficient way to accomplish this task using AngularJS and/or lodash, I would greatly appreciate your insight.

javascript arrays angularjs lodash

Answer 1

Answer №1

One way to accomplish this task is by using plain JavaScript:

const completeCars = drives.map(item => ({
  id: item.id,
  name: item.name,
  cars: drivesXcars
    .filter(car => car.drivesId === item.id)
    .map(filteredCar => cars.find(c => c.carId === filteredCar.carId))
}))

For a working example, check out JS Bin.

Answer 2

One way to accomplish this task is by using plain JavaScript:

const completeCars = drives.map(item => ({
  id: item.id,
  name: item.name,
  cars: drivesXcars
    .filter(car => car.drivesId === item.id)
    .map(filteredCar => cars.find(c => c.carId === filteredCar.carId))
}))

For a working example, check out JS Bin.

Answer 3

Answer №2

Using Underscore.js, this solution demonstrates grouping and mapping with arrays:

var groupById = _.groupBy(data, "id");
var mappedResults = array.map(function(item){
                            return {
                                "id": item.id,
                                "name": item.name,
                                "details": groupById[item.name.toLowerCase()]
                               }
                           });

Answer 4

Using Underscore.js, this solution demonstrates grouping and mapping with arrays:

var groupById = _.groupBy(data, "id");
var mappedResults = array.map(function(item){
                            return {
                                "id": item.id,
                                "name": item.name,
                                "details": groupById[item.name.toLowerCase()]
                               }
                           });

Merge the contents of three arrays into a single array

3 Arrays

Answer №1

Answer №2

Similar questions

What happens if setTimeout fails due to a page error?

What are the steps to installing and utilizing the Chart.js package on your local machine?

VueJS throws an error indicating that the object cannot be extended

Validate an object to check for null or empty fields, including arrays, using Javascript

Generate a new perspective by incorporating two distinct arrays

Combine the PHP table with the Javascript table

Modify keys in an array created dynamically using PHP

extensive collections with numerous empty slots

Implementing the History API to dynamically load content into a div using Ajax

Crashing occurs when JSON is added to a mutable array

The note-taking app's JavaScript code does not currently have the capability to store notes in local storage

AngularJS: Utilizing ellipsis for text overflow and optimization

Creating a process to automatically generate an input field upon the selection of checkboxes

Generating a JSON object through the comparison of two other JSON objects

Basic output list of text strings

Converting a JavaScript array to formData

JQuery loader & amazing animations

Design a progress bar that advances in increments of at least two and up to a maximum of

Updating the texture passed to a RawShaderMaterial uniform in Three.js after the initial rendering process

(discovered: [object Promise]) utilizing Material UI and DexieJS