Combining two arrays of objects with unique properties into one

Question

Combining two arrays of objects with unique properties into one

Two arrays of objects are given:

array1 = [{"id":1,"cost":200,"qty":56},{"id":2,"cost":100,"qty":16}];
        array2 = [{"id":1,"cost":200,"desc":"a good one"},{"id":2,"cost":100,"desc":"a bad one"},{"id":3,"cost":50,"desc":"an okay one"}];

The goal is to merge them in a way that each object contains properties from both arrays, excluding the object not present in the first array.

An attempt has been made using the following code snippet:


                var mergeArrays = function() {
                    var array1 = [{"id":1,"cost":200,"qty":56},{"id":2,"cost":100,"qty":16}];
                    var array2 = [{"id":1,"cost":200,"desc":"a good one"},{"id":2,"cost":100,"desc":"a bad one"},{"id":3,"cost":50,"desc":"an okay one"}];

                    var newArray = array2.filter(i => array1.map(a=> { if(a.id == i.id) i.qty = a.qty; return i; }));

                    return newArray.filter(i=> { if(i.qty) return i; });
                }

                console.log(mergeArrays());

While this method works in some cases, there are inconsistencies depending on the environment. Seeking alternative solutions to address this issue.

javascript arrays object

Answer 1

Answer №1

To enhance the first array by incorporating properties from the second array, you can reference objects in the second array and map them to the first.

const
    array1 = [{ id: 1, cost: 200, qty: 56 }, { id: 2, cost: 100, qty: 16 }],
    array2 = [{ id: 1, cost: 200, desc: "a good one" }, { id: 2, cost: 100, desc: "a bad one" }, { id: 3, cost: 50, desc: "an okay one" }],
    references2 = Object.fromEntries(array2.map(o => [o.id, o])),
    result = array1.map(o => ({ ...o, ...references2[o.id] }));

console.log(result);

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

Answer 2

To enhance the first array by incorporating properties from the second array, you can reference objects in the second array and map them to the first.

const
    array1 = [{ id: 1, cost: 200, qty: 56 }, { id: 2, cost: 100, qty: 16 }],
    array2 = [{ id: 1, cost: 200, desc: "a good one" }, { id: 2, cost: 100, desc: "a bad one" }, { id: 3, cost: 50, desc: "an okay one" }],
    references2 = Object.fromEntries(array2.map(o => [o.id, o])),
    result = array1.map(o => ({ ...o, ...references2[o.id] }));

console.log(result);

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

Answer 3

Answer №2

const data = [
  {"id":1,"price":200,"quantity":56},
  {"id":2,"price":100,"quantity":16}
];

const details = [
  {"id":1,"price":200,"description":"a good one"},
  {"id":2,"price":100,"description":"a bad one"},
  {"id":3,"price":50,"description":"an okay one"}
];

const result = data.reduce((prev, current) => {
  const matchingObj = details.find(item => item.id === current.id) ?? {};
  prev.push({...current, ...matchingObj});
  return prev;
}, []);

console.log(result);

Answer 4

const data = [
  {"id":1,"price":200,"quantity":56},
  {"id":2,"price":100,"quantity":16}
];

const details = [
  {"id":1,"price":200,"description":"a good one"},
  {"id":2,"price":100,"description":"a bad one"},
  {"id":3,"price":50,"description":"an okay one"}
];

const result = data.reduce((prev, current) => {
  const matchingObj = details.find(item => item.id === current.id) ?? {};
  prev.push({...current, ...matchingObj});
  return prev;
}, []);

console.log(result);

Combining two arrays of objects with unique properties into one

Answer №1

Answer №2

Similar questions

Error code 400 encountered when processing Stripe webhooks

IFrame issue: Page is constantly refreshing when on iframe source

Issue with setting a cookie using Node.js Puppeteer: cookie not being set as expected

Using Json.stringify enables the conversion of HTML elements into a JSON

jQuery Algorithm for calculating totals

Java Array Iteration in a Loop

Fix background transition and add background dim effect on hover - check out the fiddle!

Retrieve the specific element value located at an index within an array in PHP

Leveraging Vue.js to showcase API information through attribute binding

What is preventing me from generating a string for transform:translate within Angular.js?

Tips for avoiding variable overwriting while utilizing it in a for loop to color objects

Toggle between multiple chart displays within a <div> using a selection list

Creating Input Fields on the Fly in VueJS

Verify if there are DOM elements located within a DIV container, execute the functions associated with those elements sequentially

Navigating Dynamically between tabs - A How-to Guide

Encountering a Forbidden Error with Superagent

What is the best way to reset local state after triggering a success action in Redux Saga?

a guide on expanding a submenu in a shiny dashboard sidebar without using automated functions

Optimizing nested collections with JavaScript arrays of boolean values