Merge two arrays of objects together and eliminate duplicates based on a specific attribute

Question

Merge two arrays of objects together and eliminate duplicates based on a specific attribute

I am currently working with two arrays of objects. One array retrieves data from an API to display in the application, while the other array fetches data from localStorage, which includes modifications made to the original data stored in the first array. My goal is to combine these two arrays, but I need to ensure that there are no duplicate objects to prevent redundant rendering.

Here's an example of the desired outcome:

data1 = [
  {customer: {
    purchased: false,
    id: 1
  }}, 
  {customer: {
      purchased: false,
      id: 2
  }}
]

data2 = [
  {customer: {
    purchased: true,
    id: 1
  }}
]

data3 = data1.concat(data2)

result: 
data3 = [
  {customer: {
    purchased: true,
    id: 1
  }}, 
  {customer: {
    purchased: false,
    id: 2
  }}
]

I have been struggling to find an effective way to compare the two arrays. Despite brainstorming various approaches, I have been unsuccessful in my attempts.

javascript arrays

Answer 1

Answer №1

Is something similar to this?

const data1 = 
      [ { customer: { purchased: false, id: 1 } } 
      , { customer: { purchased: false, id: 2 } } 
      ] 
const data2 = 
      [ { customer: { purchased: true, id: 1 } } 
      ] 


const data3 = data1.map(item=>
  {
  let newItem = data2.find(x=>x.customer.id === item.customer.id )
  return newItem? newItem : item
  })

console.log(  data3  )

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

But be cautious, this is an array of objects within objects so it's recommended to use

const data3 = data1.map(item=>
  {
  let newItem = data2.find(x=>x.customer.id === item.customer.id )
  return newItem? JSON.parse(JSON.stringify(newItem)) : JSON.parse(JSON.stringify(item))
  })

if you want a completely new array

Answer 2

Is something similar to this?

const data1 = 
      [ { customer: { purchased: false, id: 1 } } 
      , { customer: { purchased: false, id: 2 } } 
      ] 
const data2 = 
      [ { customer: { purchased: true, id: 1 } } 
      ] 


const data3 = data1.map(item=>
  {
  let newItem = data2.find(x=>x.customer.id === item.customer.id )
  return newItem? newItem : item
  })

console.log(  data3  )

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

But be cautious, this is an array of objects within objects so it's recommended to use

const data3 = data1.map(item=>
  {
  let newItem = data2.find(x=>x.customer.id === item.customer.id )
  return newItem? JSON.parse(JSON.stringify(newItem)) : JSON.parse(JSON.stringify(item))
  })

if you want a completely new array

Answer 3

Answer №2

To ensure that your customer objects are unique, you can achieve this by utilizing the id field for mapping. In this method, entries from the second object will have priority, giving precedence to local storage over API results:

let mergeCustomerData = (arr1, arr2) => {
  
  // Convert both arrays into maps, with the `item.customer.id` property as the key
  [ arr1, arr2 ] = [ arr1, arr2 ].map(arr => new Map(arr.map(v => [ v.customer.id, v ])));
  
  // Combine these maps into one (consider order of `arr1` and `arr2` for preference)
  let merged = new Map([ ...arr1, ...arr2 ]);
  
  // Return the merged values, converted back into an array
  return [ ...merged ].map(([ id, v ]) => v);
  
};

let customerArray1 = [
  { customer: { purchased: false, id: 1 } }, 
  { customer: { purchased: false, id: 2 } }
];

let customerArray2 = [
  { customer: { purchased: true, id: 1 } }
];

console.log(mergeCustomerData(customerArray1, customerArray2));

Answer 4

To ensure that your customer objects are unique, you can achieve this by utilizing the id field for mapping. In this method, entries from the second object will have priority, giving precedence to local storage over API results:

let mergeCustomerData = (arr1, arr2) => {
  
  // Convert both arrays into maps, with the `item.customer.id` property as the key
  [ arr1, arr2 ] = [ arr1, arr2 ].map(arr => new Map(arr.map(v => [ v.customer.id, v ])));
  
  // Combine these maps into one (consider order of `arr1` and `arr2` for preference)
  let merged = new Map([ ...arr1, ...arr2 ]);
  
  // Return the merged values, converted back into an array
  return [ ...merged ].map(([ id, v ]) => v);
  
};

let customerArray1 = [
  { customer: { purchased: false, id: 1 } }, 
  { customer: { purchased: false, id: 2 } }
];

let customerArray2 = [
  { customer: { purchased: true, id: 1 } }
];

console.log(mergeCustomerData(customerArray1, customerArray2));

Answer 5

Answer №3

Retrieve the identifiers from the second array. The output will be the combination of the second array along with all elements from the first array that have an identifier not present in the stored identifiers.

data1 = [
  {customer: { purchased: false, id: 1 }}, 
  {customer: { purchased: false, id: 2 }}
];

data2 = [
  {customer: { purchased: true, id: 1 }},
  {customer: { purchased: true, id: 5 }}
];

function combineData( data1, data2) {
    let output = data2;
  let ids = [];
  data2.forEach(element => ids.push(element.customer.id));
 
  data1.forEach(element => {
    id = element.customer.id;
    if ( ids.indexOf(id) == -1 )
        output.push(element);
  });
  
  return output;
}
 
console.log( combineData( data1, data2));

Answer 6

Retrieve the identifiers from the second array. The output will be the combination of the second array along with all elements from the first array that have an identifier not present in the stored identifiers.

data1 = [
  {customer: { purchased: false, id: 1 }}, 
  {customer: { purchased: false, id: 2 }}
];

data2 = [
  {customer: { purchased: true, id: 1 }},
  {customer: { purchased: true, id: 5 }}
];

function combineData( data1, data2) {
    let output = data2;
  let ids = [];
  data2.forEach(element => ids.push(element.customer.id));
 
  data1.forEach(element => {
    id = element.customer.id;
    if ( ids.indexOf(id) == -1 )
        output.push(element);
  });
  
  return output;
}
 
console.log( combineData( data1, data2));

Merge two arrays of objects together and eliminate duplicates based on a specific attribute

Answer №1

Answer №2

Answer №3

Similar questions

What are the steps to start a ExpressJS server for webpages that are not index.html?

Mat-SideNav in Angular Material is not toggled by default

Using Three.js to extract Vertex Colors based on the z-coordinate of Vectors

Using jQuery, retrieve JSON data from a different domain URL, even if the JSON data is not well-structured

I am experiencing an issue where the submit button in my HTML form is unresponsive to clicks

Facing a dilemma: Javascript not updating HTML image source

Customize your payment with a PayPal button tailored to your desired price

retrieving request headers using XMLHttpRequest

In Vue.js, I only want to retrieve and display the parent's ID or name once for each of its child components

Having difficulty changing the visibility of a div element

What is the best way to enable a link upon clicking while simultaneously disabling the others using JavaScript?

RadAjaxNamespace is not found within the codebase

How to dynamically add an input textbox after a selection change in YUI JavaScript?

Using Strapi to showcase images in a React frontend

Assigning a price to a list of pizza options within a dropdown menu

absence of data in ajax response (or HTTP status code 206 Partial Content)

Two airplanes in such close proximity to each other

Changing Array into a JSON Document

Show a picture without specifying its file location

Automatically refreshing controller functionality in CodeIgniter