Angular 6 TypeScript allows for efficient comparison and updating of keys within arrays of objects. By leveraging this feature

Question

Angular 6 TypeScript allows for efficient comparison and updating of keys within arrays of objects. By leveraging this feature

arrayOne: [
{ 
  id: 1,
  compId: 11,
  active: false, 
},
{ 
  id: 2,
  compId: 22,
  active: false, 
},
{ 
  id: 3,
  compId: 33,
  active: false, 
},
]

arrayTwo: [
{ 
  id: 1,
  compId: 11,
  active: true, 
},
{ 
  id: 2,
  compId: 33,
  active: false, 
},
]

I am presented with two JSON arrays and need to compare the compId keys in order to update the active key in arrayOne based on matching entries in arrayTwo.

In my attempt to solve this using AngularJs, I referred to a similar question on Stack Overflow which can be found here.

However, I now seek guidance on how to execute this comparison and update functionality in an Angular 6 project written in TypeScript.

The expected outcome should result in:

arrayOne: [
{ 
  id: 1,
  compId: 11,
  active: true, 
},
{ 
  id: 2,
  compId: 22,
  active: false, 
},
{ 
  id: 3,
  compId: 33,
  active: false, 
},
]

javascript angular typescript angular6

Answer 1

Answer №1

Give this a shot,

// Loop through the first list
for(let element of this.listOne){
    // Verify if the element is present in the second list
    if(this.listTwo.find(i=>i.compId==element.compId)){
        // Update the key value
        element.active = this.listTwo.find(i=>i.compId==element.compId).active;
    }
}

Answer 2

Give this a shot,

// Loop through the first list
for(let element of this.listOne){
    // Verify if the element is present in the second list
    if(this.listTwo.find(i=>i.compId==element.compId)){
        // Update the key value
        element.active = this.listTwo.find(i=>i.compId==element.compId).active;
    }
}

Answer 3

Answer №2

To implement the desired functionality, you can utilize the map and filter functions in the following manner:

listOne = listOne.map(item => {
       let matchingItem = listTwo.filter(c => c.compId == item.compId)[0];
       if(matchingItem != undefined){
           item.active = matchingItem.active;
           return item;
       }else{
           return item;
       }
    });

let listOne= [
{ 
  id: 1,
  compId: 11,
  active: false, 
},
{ 
  id: 2,
  compId: 22,
  active: false, 
},
{ 
  id: 3,
  compId: 33,
  active: false, 
},
]

let listTwo= [
{ 
  id: 1,
  compId: 11,
  active: true, 
},
{ 
  id: 2,
  compId: 33,
  active: false, 
},
]

//let arr3 = [];

listOne = listOne.map(item => {
   let exist = listTwo.filter(c => c.compId == item.compId)[0];
   if(exist != undefined){
       //item.id = exist.id;
       item.active = exist.active;
       return item;
   }else{
       return item;
   }
});

console.log(listOne);

Answer 4

To implement the desired functionality, you can utilize the map and filter functions in the following manner:

listOne = listOne.map(item => {
       let matchingItem = listTwo.filter(c => c.compId == item.compId)[0];
       if(matchingItem != undefined){
           item.active = matchingItem.active;
           return item;
       }else{
           return item;
       }
    });

let listOne= [
{ 
  id: 1,
  compId: 11,
  active: false, 
},
{ 
  id: 2,
  compId: 22,
  active: false, 
},
{ 
  id: 3,
  compId: 33,
  active: false, 
},
]

let listTwo= [
{ 
  id: 1,
  compId: 11,
  active: true, 
},
{ 
  id: 2,
  compId: 33,
  active: false, 
},
]

//let arr3 = [];

listOne = listOne.map(item => {
   let exist = listTwo.filter(c => c.compId == item.compId)[0];
   if(exist != undefined){
       //item.id = exist.id;
       item.active = exist.active;
       return item;
   }else{
       return item;
   }
});

console.log(listOne);

Answer 5

Answer №3

After some trial and error, I was able to find a solution for the problem at hand. The approach involves iterating through two lists using nested for loops, checking each data point against one another and making necessary replacements.

for (const s of listOne) {
              for (const r of listTwo) {
                if (s.compId === r.compId) {
                  s.active = r.active;
                  break;
                }
              }
            }

Although I have provided a link to an answer related to AngularJS, please note that I am specifically looking for a solution in Angular 2+ with Typescript.

Answer 6

After some trial and error, I was able to find a solution for the problem at hand. The approach involves iterating through two lists using nested for loops, checking each data point against one another and making necessary replacements.

for (const s of listOne) {
              for (const r of listTwo) {
                if (s.compId === r.compId) {
                  s.active = r.active;
                  break;
                }
              }
            }

Although I have provided a link to an answer related to AngularJS, please note that I am specifically looking for a solution in Angular 2+ with Typescript.

Angular 6 TypeScript allows for efficient comparison and updating of keys within arrays of objects. By leveraging this feature

Answer №1

Answer №2

Answer №3

Similar questions

When trying to set the state in the OnMouseOver event, an error is thrown: TypeError - React is

Implement a one-second delay before nesting another animation

Using Phonegap alongside ons-scroller and ons-button

What is the best way to identify a specific list item from a dropdown menu and determine its position on

Guide on creating a universal template from a collection of interfaces

Only trigger NgRx actions when specific properties change during Rxjs Polling

md-input-container malfunctioning

Limit file upload size to less than 1MB in Angular 2 with typescript using ng2-file-upload

JavaScript incorrectly constructs date strings

Adding typing to Firebase Functions handlers V2: A step-by-step guide

Unexpected behavior encountered with JQueryUI modal functionality

Deploying an Angular 2 application using SystemJS and Gulp can sometimes feel cumbersome due to its

How to Resolve jQuery Script Delay Caused by AJAX Request?

How do you display a nested object in React after merging it?

Issue with Master Toggle functionality for checkbox within expanded rows of Mat-Table does not function correctly

Employ AJAX to dynamically refresh the page whenever a new row is inserted into the table

What steps do I need to take to incorporate dialog-polyfill into my React application?

Retrieve data from the database and automatically populate all text fields when the dropdown value is modified

how to set a variable's value outside of a Promise using internal code

Is there a way to show a loading icon during the image change process without using jQuery?