Saving the current state of a member variable within an Angular 2 class

export class RSDLeadsComponent implements OnInit{
    templateModel:RSDLeads  = {
        "excludedRealStateDomains": [{"domain":""}],
        "leadAllocationConfigNotEditables": [{"attributeName":""}]
    };
    oldResponse:any;
    constructor(private lambdaService:LambdaService, @Inject(APP_CONFIG)private config:IAppConfig ){};
    ngOnInit():void{
        this.getFormData();
    };
    getFormData():void{
        let getPayload = {
            "pageId": "DomainLeads",
            "operationType": "view"
        };
        this.lambdaService.getResponse('LAConfigLambda', getPayload).then((data:any) => {
            const tempData = data;
            this.templateModel.excludedRealStateDomains = data.excludedRealStateDomains;     
            this.oldResponse = tempData.excludedRealStateDomains;
        });
    };
    save(model: RSDLeads, isValid: boolean):void{
        console.log("oldResponse",this.oldResponse);//oldResponse [Object, Object, Object]

    console.log("templateModel",this.templateModel.excludedRealStateDomains);//templateModel [Object, Object, Object]
    }
}

I am returning a promise from the service lambdaService where I assign data from the database to the template/member variable templateModel which gets modified through a form in template.html. I want the initial/old response to compare it with the modified response, but I am unable to achieve that. Despite initiating a new variable, oldResponse, which should capture the original data, both console.log statements in the save function are showing the same result.

Answer №1

I found success with creating a complete duplicate of the object

By utilizing JSON.stringify and JSON.parse, I was able to copy all properties from data.excludedRealStateDomains into this.oldResponse

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

JavaScript event/Rails app encounters surprising outcome

I have encountered a strange bug in my JavaScript code. When I translate the page to another language by clicking on "English | Русский" using simple I18n translation, my menu buttons stop working until I reload the page. I suspect that the issue ...

Caution: React alert for utilizing the UNSAFE_componentWillReceiveProps in strict mode

As a newcomer to React, I encountered a warning that has me stuck. Despite researching extensively online, I still can't resolve it. The warning message is: https://i.stack.imgur.com/4yNsc.png Here are the relevant portions of the code in App.tsx: ...

The Ionic serve command fails to recognize and reflect any saved changes, leading to a lack of automatic reloading

Recently, I encountered a strange issue while using my ionic 2 application. Whenever I execute the ionic serve command, it launches the server on localhost and produces the following output: [12:00:45] ionic-app-scripts 0.0.45 [12:00:46] watch started ...

Utilizing a function as a value in React state (setState) compared to defining state with constructor in a class and utilizing a state object

Can someone help me understand the concept of state in React better? I'm confused about the differences between these two implementations: This: class Todo extends ... { constructor (){ super() this.state = { ... } } } And This: class Todo extend ...

Disable the functionality of the next and previous buttons for the Bootstrap carousel when clicking on the outer

Here is the code for the carousel: The next/prev button functions under its respective div, how can I stop it? When I click on the div below the carousel, the carousel continues to move as usual. Below the carousel div, there is another one with a tabbi ...

Modify the useRef value prior to the HTML rendering (React functional component)

Hello everyone, I am attempting to update the value of useRef before the HTML is rendered. I have tried using useEffect for this purpose, but it runs after the HTML is ready, making it unsuitable for my needs. What I want to achieve is resetting the value ...

Is there a way to divide v-progress linear into 4 pieces in Vuejs, or are there alternative design options for achieving this in Vuetify 2?

I have set up a table in Vuetify 2 with a v-progress-linear component to monitor the user's remaining time. Initially, my implementation was simple like this. However, we decided to split it into 4 sections for better visibility of the user's ti ...

Tips for configuring page-specific variables in Adobe DTM

Although I have integrated Adobe Analytics for tracking on my website, I am facing difficulty in properly defining the variables. This is how I attempted to define the variable: var z = new Object(); z.abc = true; z.def.ghi = true Despite following the ...

Tips for loading a webpage based on the selected value of a JQuery dropdown list

I'm currently working on an ASPX webpage where I am developing a feature to create reports using filter criteria. To populate my dropdown list, I am using a jqxwidget which retrieves values from a variable I have defined: var sourceRptType = [ ...

Comparing the distinction between assigning values to res and res.locals in a Node.js application using Express

Greetings! I am inquiring about the utilization of res (Express response object) and res.locals in Express. During my exploration of nodejs, I came across a code snippet that consists of a middleware (messages.js), a server (app.js), and a template (messa ...

SSI stands for Server Side Includes, a feature that allows

I have multiple versions of the same HTML page, each with only one hidden variable that is different. This variable is crucial for tracking purposes. Now, I am exploring options to rewrite this by incorporating a HTML file with a hidden variable. Here is ...

Using jQuery to align a div element to the top of the viewport

Is there a way to keep the #lightbox div positioned at the top of the viewport consistently? $(document).ready(function(){ $('.mehr').click(function() { $("body").css("overflow", "hidden"); $('#lightbox').css({'visibil ...

Error encountered: EPERM - Unable to perform operation on Windows system

Recently, I executed the following command: npm config set prefix /usr/local After executing this command, I encountered an issue when attempting to run any npm commands on Windows OS. The error message displayed was as follows: Error: EPERM: operation ...

Leverage JSON data in JavaScript

Having some trouble figuring out how to incorporate JSON values into my JS script. Any assistance would be greatly appreciated as I am still new to this! Below is the snippet of code where I need the values (lat and lon) to be inserted: var map; functio ...

What could be the reason for the checkbox not being selected in a React component

I'm currently working on integrating an autocomplete feature with checkboxes. Learn more here https://i.stack.imgur.com/YtxSS.png However, when trying to use the same component in final-form, I'm facing issues with checking my options. Why is t ...

The process of setting up a carousel for tables using jQuery

I can successfully implement jquery for an image carousel, but now I need to find a way to create a sliding table format. Any assistance on this matter would be greatly appreciated. Here is the code I currently have: <ul> <li><a style= ...

Whenever I clear the contents of the datatable, I notice that 2 thead elements

I am facing an issue with a table that I populate using jQuery's .append() function and then initialize it as a datatable. Since the data is not fetched via an ajax call, I clear both the tbody and thead using .empty(). However, I encounter a problem ...

Converting a base64 string to a PNG format for uploading to an S3 bucket from the frontend

Feeling a bit overwhelmed here, hoping this isn't just a repeat issue. I've come across similar problems but none of the solutions seem to be working for me at the moment. I'm currently utilizing react-signature-canvas for allowing users to ...

What could be causing Angular to mistakenly refer to a clearly defined object as undefined?

Within my ngrx reducer, I establish the initial state in the following manner: const initialState = { homeState: { banner: { images: ['142_111421_HOMEPAGE_HERO-SLIDE_1_DESKTOP_EN.jpg', '5434424542.jpg'], } } } When it ...

Transferring a list of files from Callback folder

I am struggling with a function that is supposed to retrieve and list all the files in a specific folder. However, I am facing issues when trying to push out these files through an array. Something seems to be going wrong in my code as I receive an error w ...