Step-by-step guide on discovering an object with an ID that is not present in a separate array

I have 2 arrays of objects. One array is the original array, and the other array contains the modified array. The modified array can include new objects, edited objects, or deleted objects in the settingValueDtoList.

Currently, I am working on writing code for a new record in the settingValueDtoList. If I add a new object to any settingValueDtoList, its id will be like a0, a1, or a2. I iterate through both arrays and check if the id is not present in the original array, indicating a new object. I then push that object into my addSettingArray variable.

How can I retrieve the new record whose id is not in the original array?

This is my approach:

compareSetting(settingArray: Array<any>) {
    console.log('abc', this.settingObject)
    console.log('settingArray',settingArray)

    let settingIndex = 0;
    
    this.settingObject.forEach(unmodifiedSetting => {   
      let modifiedSetting = settingArray[settingIndex];

      modifiedSetting.settingValueDtoList.forEach(editedSettingValue => {
          unmodifiedSetting.settingValueDtoList.forEach(uneditedSettingValue => {
            if(editedSettingValue.id != uneditedSettingValue.id) {
              this.addSettingArray.push(editedSettingValue);
            }
          });
      })
      settingIndex++;
    })

    console.log('add', this.addSettingArray)
  }

Answer №1

Consider using the following method:

checkSettings(settingArr: Array<any>) {
console.log('xyz', this.settingObject);
console.log('settingArr', settingArr);

let index = 0;

this.settingObject.forEach(originalSetting => {
  let updatedSetting = settingArr[index];

  updatedSetting.settingValueDtoList.forEach(modifiedSettingValue => {
    let isNew = true;
    originalSetting.settingValueDtoList.forEach(unmodifiedSettingValue => {
      if (modifiedSettingValue.id == unmodifiedSettingValue.id) {
        isNew = false;
      }
    });

    if (isNew) {
      this.newSettingArr.push(modifiedSettingValue);
    }
  });
  index++;
});

console.log('new', this.newSettingArr);

}

Update: A more generalized approach for clearer comprehension:

list1.forEach(item1 => 
{
  let isNewItem = true; 
  list2.forEach(item2 => 
  {
    if (item1.id == item2.id) 
    {
      isNewItem = false; 
    }
  });
  
  if (isNewItem) 
  {
    // Item1 not found in list2 - apply logic here
  }
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Best Practices for Displaying Videos in Ionic 2

Can videos be properly integrated into Ionic pages? I'm encountering an issue where the buttons become unusable in fullscreen mode when using the html 5 video element. <video id="video1" width="100%" preload="metadata" controls webkit-playsinline& ...

Retrieve the personalized data-* attributes from a specific item within an array

I'm struggling to find the correct syntax for accessing custom data-* attributes for list elements within an unordered list that has been sorted and converted into an array using the following code: $("#gridlist").sortable("toArray"); The list eleme ...

Personalizing the dimensions of audio.js

I recently integrated the audio.js plugin into my website. I've added the necessary code to the header.php file located in the includes folder. <script src="audio/audiojs/audio.min.js"></script> While the player appears correctly on othe ...

Express.js does not recognize the req.query value

Incorporating Stripe Checkout functionality into a MERN application has been the focus of my recent project. Upon successful payment by a customer, they are directed to a checkout success URL where the CheckoutSuccess page is displayed. Additionally, Stri ...

Error in Compiling HTML Elements Collection<<Element>

Currently, I am developing an eCommerce application that features a popup window for users when they click on "Add to Cart." This popup allows users to select product variations and quantities before adding the item to their cart. The popup consists of a s ...

Several functions linked to a single prop in Vue

The reference material can be found here: https://v2.vuejs.org/v2/guide/components-custom-events.html#Customizing-Component-v-model seems a bit confusing to me regarding how to link multiple events to the same component: In: https://codesandbox.io/s/da ...

Customizing Attribute for Material UI TextField

I'm currently in the process of adding a custom data attribute to a TextField component like so: class TestTextField extends React.Component { componentDidMount() {console.log(this._input)} render() { return ( <TextField label= ...

How come my links aren't initiating jQuery click events?

Today, I decided to experiment with jQuery and encountered an issue. On my webpage, there are multiple links displayed in the format shown below: <a class="a_link" id="a_id<#>" href="#">Click me</a> The value <#> is a number gener ...

Rendering with node.js express inside nested JS files

Imagine I have a basic view <html> <head> <title>something</title> </head> <body> <%= param %> </body> <script type="text/javascript" src="myscript.js"></script> </html> Be ...

Issue with styled-components not being exported

Issue: ./src/card.js There was an import error: 'Bottom' is not exported from './styles/cards.style'. card.js import React from 'react' import { Bottom, Color, Text, Image } from "./styles/cards.style"; fu ...

Modify the names of the months (output) in the datetime calendar

Currently, I am developing a web application where I am utilizing a date picker feature from the Materialangular calendar extender. <md-datepicker ng-model="mddate" ng-blur="dateformatechanged()" md-placeholder="Enter date"></md-datepicker> W ...

Angular 16 facing compatibility problems with Apollo-angular and React dependencies

I have integrated apollo-client into my Angular 16 project. "@apollo/client": "^3.8.7", "apollo-angular": "^5.0.2", "graphql": "^16.8.1", This snippet shows how the providers array is ...

Tips for attaching a "progress" and refresh event to an ajax call while sending a file

I am currently using the FormData API and AJAX to upload files to a server in PHP-CodeIgniter. The file upload works perfectly when triggered by the file select event. However, I would like to display a progress bar next to each file being uploaded with th ...

The dreaded "fatal error: JavaScript heap out of memory" message struck once again while using npx

My attempt at setting up a boilerplate for a React app involved using the command npx create-react-app assessment D:\React>create-react-app assessment Creating a new React app in D:\React\assessment. Installing packages. This might take ...

Utilizing Promises with Multiple .then() in JavaScript

I'm currently in the process of creating an array structure. In this structure, we have different parts and each part contains articles. What I've done is create a promise to gather all the parts using .then(), then I need to iterate through eac ...

Converting the information retrieved from Firebase into a different format

My Project: In my Angular SPA, I am trying to retrieve data from Firebase and display specific values on the screen. Approach Taken: The data returned from Firebase looks like this: Returned Data from Firebase Error Encountered: In order to display the ...

Generating varying commitments from one function

I have encountered an issue where I am returning a promise from a function that is part of a $q.all array. Initially, this setup works perfectly on page load. However, the challenge arises when I need to call this function multiple times afterward to updat ...

When the @Input() contains an unaltered boolean value, it does not initiate change detection

I have developed an Angular application featuring a popup component. The visibility of the popups can be controlled both from its parent and the popup itself. app.component.ts import { Component } from '@angular/core'; @Component({ selector: ...

Interact with HTML style attribute using JavaScript

Is there a way to retrieve a specific CSS property from the style attribute of an HTML element, without considering the stylesheet or computed properties? For example: <div style="float:right"></div> function fetchStyleValue(element, propert ...

Unable to modify translation values in an existing ngx-translate object

I am facing an issue where I am unable to change the value of an object property within a translation JSON file using ngx translate. Despite attempting to update the value dynamically when receiving data from an API, it seems to remain unchanged. I have t ...