Merging two arrays together in JavaScript

Question

Merging two arrays together in JavaScript

Within my possession are two arrays:

 var g= [ 
        { id: 36, name: 'AAA', goal: 'yes' },
        { id: 40, name: 'BBB', goal: 'yes' },
        { id: 39, name: 'JJJ', goal: 'yes' },
        { id: 27, name: 'CCC', goal: 'yes' }];

    var c= [ 
        { id: 36, color:"purple" },
        { id: 40, color:"purple" },
        { id: 100, color:"pink"} ];

I am seeking the following output (performing a left join based on 'id'):

    res = [{ id: 36, name: 'AAA', goal: 'yes' , color:"purple"}, { id: 40, name: 'BBB', goal: 'yes', color:"purple" }]

The current logic I have performs a merge, but now I am in need of a logic for a left join:

    function mergeBy(key, data) {
      return Array.from(data
          .reduce((m, o) => m.set(o[key], { ...m.get(o[key]), ...o }), new Map)
          .values()
      );
    }

javascript arrays join

Answer 1

Answer №1

Below are different join functions that you can choose from:

function* mergeArrays(array1, array2, key) {
    let index = new Map(array2.map(item => [key(item), item]));
    for (let item of array1) {
        let currentKey = key(item);
        if (index.has(currentKey))
            yield {...item, ...index.get(currentKey)};
    }
}

function* leftJoinArrays(array1, array2, key) {
    let index = new Map(array2.map(item => [key(item), item]));
    for (let item of array1) {
        let currentKey = key(item);
        yield index.has(currentKey) ? {...item, ...index.get(currentKey)} : item;
    }
}

function* rightJoinArrays(array1, array2, key) {
    let index = new Map(array1.map(item => [key(item), item]));
    for (let item of array2) {
        let currentKey = key(item);
        yield index.has(currentKey) ? {...index.get(currentKey), ...item} : item;
    }
}


//

var arrayA = [
    {id: 1, value: 'a1'},
    {id: 2, value: 'a2'},
    {id: 7, value: 'a3'},
    {id: 8, value: 'a4'}
];

var arrayB = [
    {id: 1, value: 'b1'},
    {id: 2, value: 'b2'},
    {id: 9, value: 'b3'}
];


console.log('MERGE:')
console.log(...mergeArrays(arrayA, arrayB, item => item.id))
console.log('LEFT JOIN')
console.log(...leftJoinArrays(arrayA, arrayB, item => item.id))
console.log('RIGHT JOIN')
console.log(...rightJoinArrays(arrayA, arrayB, item => item.id))

Answer 2

Below are different join functions that you can choose from:

function* mergeArrays(array1, array2, key) {
    let index = new Map(array2.map(item => [key(item), item]));
    for (let item of array1) {
        let currentKey = key(item);
        if (index.has(currentKey))
            yield {...item, ...index.get(currentKey)};
    }
}

function* leftJoinArrays(array1, array2, key) {
    let index = new Map(array2.map(item => [key(item), item]));
    for (let item of array1) {
        let currentKey = key(item);
        yield index.has(currentKey) ? {...item, ...index.get(currentKey)} : item;
    }
}

function* rightJoinArrays(array1, array2, key) {
    let index = new Map(array1.map(item => [key(item), item]));
    for (let item of array2) {
        let currentKey = key(item);
        yield index.has(currentKey) ? {...index.get(currentKey), ...item} : item;
    }
}


//

var arrayA = [
    {id: 1, value: 'a1'},
    {id: 2, value: 'a2'},
    {id: 7, value: 'a3'},
    {id: 8, value: 'a4'}
];

var arrayB = [
    {id: 1, value: 'b1'},
    {id: 2, value: 'b2'},
    {id: 9, value: 'b3'}
];


console.log('MERGE:')
console.log(...mergeArrays(arrayA, arrayB, item => item.id))
console.log('LEFT JOIN')
console.log(...leftJoinArrays(arrayA, arrayB, item => item.id))
console.log('RIGHT JOIN')
console.log(...rightJoinArrays(arrayA, arrayB, item => item.id))

Answer 3

Answer №2

When it comes to achieving the desired outcome, a left join is not what you need. What you actually require is an inner join of g and c using id in order to combine their properties. The following code snippet accomplishes this:

var g= [ 
        { id: 36, name: 'AAA', goal: 'yes' },
        { id: 40, name: 'BBB', goal: 'yes' },
        { id: 39, name: 'JJJ', goal: 'yes' },
        { id: 27, name: 'CCC', goal: 'yes' }];

var c= [ 
        { id: 36, color:"purple" },
        { id: 40, color:"purple" },
        { id: 100, color:"pink"} ];
    
function mergeBy(key, dataL, dataR) {
  const rMap = dataR.reduce((m, o) => m.set(o[key], { ...m.get(o[key]), ...o }), new Map);
  
  return dataL.filter(x => rMap.get(x[key])).map(x => ({...x, ...rMap.get(x[key]) }));
}

console.log(mergeBy("id",g, c))

Answer 4

When it comes to achieving the desired outcome, a left join is not what you need. What you actually require is an inner join of g and c using id in order to combine their properties. The following code snippet accomplishes this:

var g= [ 
        { id: 36, name: 'AAA', goal: 'yes' },
        { id: 40, name: 'BBB', goal: 'yes' },
        { id: 39, name: 'JJJ', goal: 'yes' },
        { id: 27, name: 'CCC', goal: 'yes' }];

var c= [ 
        { id: 36, color:"purple" },
        { id: 40, color:"purple" },
        { id: 100, color:"pink"} ];
    
function mergeBy(key, dataL, dataR) {
  const rMap = dataR.reduce((m, o) => m.set(o[key], { ...m.get(o[key]), ...o }), new Map);
  
  return dataL.filter(x => rMap.get(x[key])).map(x => ({...x, ...rMap.get(x[key]) }));
}

console.log(mergeBy("id",g, c))

Answer 5

Answer №3

If you're looking to extract uncommon keys from different sets and then filter the merged results, here's a JavaScript function that can help:

const
    mergeCommon = (a, b, key) => {
        const aByKey = a.reduce((m, o) => m.set(o[key], o), new Map);

        return b.reduce((r, o) => {
            if (aByKey.has(o[key])) r.push({ ... aByKey.get(o[key]), ...o});
            return r;
        }, []);
    },
    g = [{ id: 36, name: 'AAA', goal: 'yes' , 'random': 27 }, { id: 40, name: 'BBB', goal: 'yes' }, { id: 39, name: 'JJJ', goal: 'yes' }, { id: 27, name: 'CCC', goal: 'yes' , lag: "23.3343" }],
    c = [{ id: 36, name: 'AAA', goal: 'yes', color:"purple" }, { id: 40, name: 'BBB', circle: 'yes', color:"purple" }, { id: 100, name: 'JJJ', circle: 'yes'}],
    result = mergeCommon(g, c, 'id');

console.log(result);

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

Answer 6

If you're looking to extract uncommon keys from different sets and then filter the merged results, here's a JavaScript function that can help:

const
    mergeCommon = (a, b, key) => {
        const aByKey = a.reduce((m, o) => m.set(o[key], o), new Map);

        return b.reduce((r, o) => {
            if (aByKey.has(o[key])) r.push({ ... aByKey.get(o[key]), ...o});
            return r;
        }, []);
    },
    g = [{ id: 36, name: 'AAA', goal: 'yes' , 'random': 27 }, { id: 40, name: 'BBB', goal: 'yes' }, { id: 39, name: 'JJJ', goal: 'yes' }, { id: 27, name: 'CCC', goal: 'yes' , lag: "23.3343" }],
    c = [{ id: 36, name: 'AAA', goal: 'yes', color:"purple" }, { id: 40, name: 'BBB', circle: 'yes', color:"purple" }, { id: 100, name: 'JJJ', circle: 'yes'}],
    result = mergeCommon(g, c, 'id');

console.log(result);

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

Answer 7

Answer №4

Utilize the power of Maps to merge two arrays together. Check out the code snippet which demonstrates Left Join, Right Join, and Inner Join functionalities.

All three join operations have a time complexity of O(N).

const g = [
  { id: 36, name: 'AAA', goal: 'yes', random: 27 },
  { id: 40, name: 'BBB', goal: 'yes' },
  { id: 39, name: 'JJJ', goal: 'yes' },
  { id: 27, name: 'CCC', goal: 'yes', lag: '23.3343' },
];

const c = [
  { id: 36, name: 'AAA', goal: 'yes', color: 'purple' },
  { id: 40, name: 'BBB', circle: 'yes', color: 'purple' },
  { id: 100, name: 'JJJ', circle: 'yes' },
];

const gMap = new Map(g.map(o => [o.id, o]));
const cMap = new Map(c.map(o => [o.id, o]));

const leftJoin = g.reduce(
  (a, o) => (cMap.has(o.id) ? [...a, { ...o, ...cMap.get(o.id) }] : [...a, o]),
  []
);

const rightJoin = c.reduce(
  (a, o) => (gMap.has(o.id) ? [...a, { ...o, ...gMap.get(o.id) }] : [...a, o]),
  []
);

const innerJoin = g.reduce(
  (a, o) => (cMap.has(o.id) ? [...a, { ...o, ...cMap.get(o.id) }] : a),
  []
);

console.log("LEFT JOIN\n", leftJoin)
console.log("RIGHT JOIN\n", rightJoin)
console.log("INNER JOIN\n", innerJoin)

Answer 8

Utilize the power of Maps to merge two arrays together. Check out the code snippet which demonstrates Left Join, Right Join, and Inner Join functionalities.

All three join operations have a time complexity of O(N).

const g = [
  { id: 36, name: 'AAA', goal: 'yes', random: 27 },
  { id: 40, name: 'BBB', goal: 'yes' },
  { id: 39, name: 'JJJ', goal: 'yes' },
  { id: 27, name: 'CCC', goal: 'yes', lag: '23.3343' },
];

const c = [
  { id: 36, name: 'AAA', goal: 'yes', color: 'purple' },
  { id: 40, name: 'BBB', circle: 'yes', color: 'purple' },
  { id: 100, name: 'JJJ', circle: 'yes' },
];

const gMap = new Map(g.map(o => [o.id, o]));
const cMap = new Map(c.map(o => [o.id, o]));

const leftJoin = g.reduce(
  (a, o) => (cMap.has(o.id) ? [...a, { ...o, ...cMap.get(o.id) }] : [...a, o]),
  []
);

const rightJoin = c.reduce(
  (a, o) => (gMap.has(o.id) ? [...a, { ...o, ...gMap.get(o.id) }] : [...a, o]),
  []
);

const innerJoin = g.reduce(
  (a, o) => (cMap.has(o.id) ? [...a, { ...o, ...cMap.get(o.id) }] : a),
  []
);

console.log("LEFT JOIN\n", leftJoin)
console.log("RIGHT JOIN\n", rightJoin)
console.log("INNER JOIN\n", innerJoin)

Answer 9

Answer №5

var x = [ 
    { id: 36, name: 'AAA', purpose: 'yes' , 'random':27},
    { id: 40, name: 'BBB', purpose: 'yes' },
    { id: 39, name: 'JJJ', purpose: 'yes' },
    { id: 27, name: 'CCC', purpose: 'yes' , lag: "23.3343"}
];

var y = [ 
    { id: 36, name: 'AAA', purpose: 'yes', color:"purple" },
    { id: 40, name: 'BBB', circle: 'yes', color:"purple" },
    { id: 100, name: 'JJJ', circle: 'yes'} 
];


const mergedArr = (arr1, arr2) => {
//Filter the arr2 and find the only matching elements from the first array
    const filteredArray = arr2.filter(({id}) => arr1.some(({id: arr1Id}) => arr1Id === id));
    //Loop through the filtered array and fetch the matching item from first and add obj from filtered array
    return filteredArray.map(obj => {
        return {
            ...arr1.find(({id}) => id === obj.id),
            ...obj
        }
    })
}    
console.log(mergedArr(x, y));

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

Answer 10

var x = [ 
    { id: 36, name: 'AAA', purpose: 'yes' , 'random':27},
    { id: 40, name: 'BBB', purpose: 'yes' },
    { id: 39, name: 'JJJ', purpose: 'yes' },
    { id: 27, name: 'CCC', purpose: 'yes' , lag: "23.3343"}
];

var y = [ 
    { id: 36, name: 'AAA', purpose: 'yes', color:"purple" },
    { id: 40, name: 'BBB', circle: 'yes', color:"purple" },
    { id: 100, name: 'JJJ', circle: 'yes'} 
];


const mergedArr = (arr1, arr2) => {
//Filter the arr2 and find the only matching elements from the first array
    const filteredArray = arr2.filter(({id}) => arr1.some(({id: arr1Id}) => arr1Id === id));
    //Loop through the filtered array and fetch the matching item from first and add obj from filtered array
    return filteredArray.map(obj => {
        return {
            ...arr1.find(({id}) => id === obj.id),
            ...obj
        }
    })
}    
console.log(mergedArr(x, y));

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

Answer 11

Answer №6

Here is a concise solution

 const games = [ 
        { id: 36, name: 'AAA', goal: 'yes' },
        { id: 40, name: 'BBB', goal: 'yes' },
        { id: 39, name: 'JJJ', goal: 'yes' },
        { id: 27, name: 'CCC', goal: 'yes' }];

    const colors = [ 
        { id: 36, color:"purple" },
        { id: 40, color:"purple" },
        { id: 100, color:"pink"} ];



const result = games.map(item => !!colors.find(elem => elem.id === item.id) && ({...item, ...colors.find(elem => elem.id === item.id)})).filter(Boolean);
console.log(result);

Answer 12

Here is a concise solution

 const games = [ 
        { id: 36, name: 'AAA', goal: 'yes' },
        { id: 40, name: 'BBB', goal: 'yes' },
        { id: 39, name: 'JJJ', goal: 'yes' },
        { id: 27, name: 'CCC', goal: 'yes' }];

    const colors = [ 
        { id: 36, color:"purple" },
        { id: 40, color:"purple" },
        { id: 100, color:"pink"} ];



const result = games.map(item => !!colors.find(elem => elem.id === item.id) && ({...item, ...colors.find(elem => elem.id === item.id)})).filter(Boolean);
console.log(result);

Merging two arrays together in JavaScript

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

utilizing parent scope in a jQuery function callback

Vue alert: Issue with rendering - TypeError: Unable to access property 'NomeStr' as it is undefined

Develop an array of arrays using jython to facilitate interoperability with Java code

How can I retrieve the value of an HTML component when submitting a form?

How to display two elements side by side within a div using React

Using Ajax to insert data into WordPress

Having difficulty locating the login button on the webpage

Using the Gmail API to retrieve the access token details by extracting the "code" parameter from the URL of a pop-up window

Continue executing without stopping

What is the best way to access the child component in React?

Using JQuery, remove any duplicate items from one list box and populate another list box

Retrieve the variable only once a response has been received from the POST request

Do these two JavaScript statements behave the same under the principles of functional programming in a React environment?

What criteria should I consider when selecting a make for the createTheme components?

Is there a way to instruct npm to compile a module during installation using the dependencies of the parent project?

Why isn't the externally loaded JS file executing properly?

Utilizing express-session and passport to initiate a new session for each request

Dynamic font sizing in CSS allows text on a webpage to

Electron JS-powered app launcher for seamless application launching

How can I pass a specific value, rather than the entire array, in a ReactJS dropdown menu?