Combining two arrays of objects using unique keys in Angular 8

Question

Combining two arrays of objects using unique keys in Angular 8

There are two Arrays of Objects, Arr1 and Arr2. The goal is to merge these two arrays based on their 'id' values. If Arr1 does not contain any object with the same id as in Arr2, then that particular object node should be pushed into Arr1. How can this be achieved?

Arr1 =
[
  {
    'id': 101,
    'name': "ABC"
  },
  {
    'id': 202,
    'name': "DEF"
  }
];

Arr2 =
[
  {
    'id': 303,
    'name': "PQR"
  },
  {
    'id': 404,
    'name': "XYZ"
  },
  {
    'id': 202,
    'name': "DEF"
  }
];

Arr1 =
[
  {
    'id': 101,
    'name': "ABC"
  },
  {
    'id': 202,
    'name': "DEF"
  },
  {
    'id': 303,
    'name': "PQR"
  },
  {
    'id': 404,
    'name': "XYZ"
  }
];

javascript angular typescript

Answer 1

Answer №1

Iterate through the elements in Arr2 using the forEach method. Inside the callback function, utilize the findIndex method to determine if the current element being iterated over is present in Arr1. The findIndex method will return the index of the element if found in the array, or -1 if not found. If the result of findIndex is -1, then add that item from the second array to Arr1.

let Arr1 = [{
    'id': 101,
    'name': "ABC"
  },
  {
    'id': 202,
    'name': "DEF"
  }
];

const Arr2 = [{
    'id': 303,
    'name': "PQR"
  },
  {
    'id': 404,
    'name': "XYZ"
  },
  {
    'id': 202,
    'name': "DEF"
  }
];

Arr2.forEach((item) => {
  const isPresentInArry1 = Arr1.findIndex(elem => elem.id === item.id);
  if (isPresentInArry1 === -1) {
    Arr1.push(item)
  }
});

console.log(Arr1)

Answer 2

Iterate through the elements in Arr2 using the forEach method. Inside the callback function, utilize the findIndex method to determine if the current element being iterated over is present in Arr1. The findIndex method will return the index of the element if found in the array, or -1 if not found. If the result of findIndex is -1, then add that item from the second array to Arr1.

let Arr1 = [{
    'id': 101,
    'name': "ABC"
  },
  {
    'id': 202,
    'name': "DEF"
  }
];

const Arr2 = [{
    'id': 303,
    'name': "PQR"
  },
  {
    'id': 404,
    'name': "XYZ"
  },
  {
    'id': 202,
    'name': "DEF"
  }
];

Arr2.forEach((item) => {
  const isPresentInArry1 = Arr1.findIndex(elem => elem.id === item.id);
  if (isPresentInArry1 === -1) {
    Arr1.push(item)
  }
});

console.log(Arr1)

Combining two arrays of objects using unique keys in Angular 8

Answer №1

Similar questions

How can Action type be inferred from mapping object to ensure type safety when using useReducer dispatch?

Retrieving information from a local JSON file in Vue.js using the jQuery $.getJSON() method

Repeating audio playback in HTML5 with a pause option

How to send a JSON object using Node.js Express 4.0

Ways to insert a color into an HTML text box based on a condition

What is the best way to prevent the chaining of promises and catches in JavaScript?

Can a callback in an ES6 class constructor ensure that the promise is either resolved or rejected?

Why is Selectpicker failing to display JSON data with vue js?

Unique rewritten text: "Displaying a single Fancybox popup during

Autocomplete feature shows usernames while storing corresponding user IDs

angular displaying incorrect values for counter

Incorporate a CSS framework into the Angular vendor bundle

What is the most effective way to receive notifications when an OAuth response has been received?

I'm encountering an issue with the React state where it seems to be endlessly nesting

Ways to activate and deactivate the Delete button in a GridView using Jquery when the checkbox is left unchecked

Tips for executing jsfiddle code within Joomla 3.2

Using JQuery to incorporate carousel elements

The SyntaxError message indicates that there was an unexpected non-whitespace character found after the JSON data when parsing it

Mastering the art of using wildcards in CSS can help you harness the power of recognizing attributes

Implementing Voting Functionality with Ajax Submission