Maintain the initial worth even when making alterations

I've been working with Ag-grid and facing an issue.

Initially, I load the original data into the grid using this.rowData.

I have a function called addRow that successfully adds a row to the top of the existing rows.

However, when the reset function is called, I need to update the grid with the original data stored in this.rowData.

The problem arises when I click on addRow - it seems to update the this.rowData as well.

Below is a snippet of my code:

Original Data:
 this._Service.httpPost(Request, Url).subscribe(data => {
        responseJson = JSON.parse(JSON.stringify(data));
          this.rowData = responseJson;
          this.gridOptions.api.setRowData(this.rowData); // displays 6 rows
});

addRow:
addRow() {
let rowData = this.rowData; // creating a local variable
 rowData.unshift(newData);// rowData now has 7 rows
 this.gridOptions.api.setRowData(rowData);// rowData still has 7 rows
console.log(this.rowData) // returns 7, unsure why `this.rowData` is getting modified
    }

Answer №1

Grab the rowData by converting it to a JSON string then back to an object.

Execute this part, the remaining code is flawless.

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

When using REACT to fetch data from an API, the absence of an 'Access-Control-Allow-Origin' header may result in access issues

I am working on a project that involves retrieving products from a company's API. After reaching out to the company, they provided me with the following information: CORS allowed origins for local development is "http://localhost:1229" To adhere t ...

Ensure the text value of a collection of web elements by utilizing nightwatch.js

Recently, I started using nightwatch.js and I am trying to retrieve a list of elements to verify the text value of each element against a specific string. Here's what I have attempted: function iterateElements(elems) { elems.value.forEach(funct ...

Updating objects in Angular 8 while excluding the current index: a guide

this.DynamicData = { "items": [ { "item": "example", "description": "example" }, { "item": "aa", "description": "bb" }, ...

Is it possible to dynamically create new input fields by starting their index from the highest number after deletion?

I am working on a feature where users can add new rows with unique IDs and names. Everything works well, but the issue arises when deleting a row other than the last one. Here is an example of my code: $("#add_row").on('click', addRow); funct ...

What is the process for triggering an exception?

I have a specific function that converts a two-dimensional array into CSV format. The key requirement is that the function only supports text and numbers, triggering an error message for any other input types. Currently, when I execute the function, it s ...

Value attribute property binding

Currently, I am diving into the world of Angular 5 and focusing on grasping the fundamentals. One concept that caught my attention is template reference variables. However, I encountered a roadblock along the way. Instead of utilizing a template reference ...

Leveraging the power of a JavaScript framework within the script tag

Hello there! I'm just starting out with vue.js and exploring different JavaScript frameworks. Recently, I came across an interesting example based on the documentation. import modal from 'vue-semantic-modal' export default { components ...

When a React CSS class is deployed to a production server, it may be automatically

I've encountered a strange CSS issue while working on my React project. One specific section of the JSX <div> has a class with style properties defined in the main .css file. During local development, everything appears as expected. However, aft ...

An issue arose while attempting to pin a file on IPFS: A TypeError [ERR_INVALID_ARG_TYPE] was encountered, specifying that the argument "url" must be a string data type

Adding the files to another project resulted in an error that I am struggling to understand. When running "node scripts1/runScript.js", the error message received is as follows: Error occurred while pinning file to IPFS: TypeError [ERR_INVALID_ARG_TYPE]: ...

Having trouble with the base64 output in React image cropping?

I am having some difficulties cropping and uploading an image to the server. The API server requires the image in base64 format, but I am receiving it as a blob. Does anyone know of a workaround for this issue? Any help would be greatly appreciated! I&apos ...

Problems encountered while starting npm in Angular 13

Versions -> PS C:\Users\user> npm --version 8.8.0 PS C:\Users\user> node --version v16.15.0 Executing the following command-> npx -p @angular/cli ng new JokeFrontB After that, I run Serve -> npm start and encountered t ...

Google Script: How to automatically open a newly created text document after its creation

I decided to try out this script for generating Google text documents from Google Spreadsheet data. However, I noticed that the new text document created from a template is always placed in the default folder. This means that I have to manually locate the ...

show the attributes of an item contained within an array of objects

Hey there! I'm facing an issue with displaying the content of an object on my HTML page using React. So, here's what's happening: I can access the frontend properties in my object array, but when I try to loop through each element and displa ...

The lazy loading feature is affected by Angular's ng build process

My app has lazy loading configured and works fine with ng serve. However, when I use ng build, it stops working without any error messages. I have checked the Angular official documentation and can't seem to find any missing steps in my process. I in ...

Checking File Upload Progress in HTML and PHP

As a newcomer, I've been struggling to find a solution to an issue I'm facing. My concern is regarding a form that is meant to upload a file and send it via email. How can I display the progress status of the file being uploaded? It seems that us ...

When attempting to display an identical image on two distinct canvas elements in Angular 6

I am facing an issue where the image is only rendered on the second canvas instead of both canvases. I need assistance in finding a solution to render the same image on both canvases. Below is a screenshot demonstrating that the image is currently only re ...

Uncovering design elements from Material UI components

The AppBar component applies certain styles to children of specific types, but only works on direct children. <AppBar title="first" iconElementRight={ <FlatButton label="first" /> }/> <AppBar title="second" iconElementRight={ <di ...

datetime-local format changing after selection

In an ionic application running on an android system, there is a issue with the formatting of <input type='datetime-local'> inputs. After a user selects a date, the Start input is formatted differently than the Ende input. Attempts to use t ...

Struggling to establish a functioning proxy in my React and Node application

In the process of developing a react client app with a node.js express backend, I have encountered an issue related to project structure. https://i.sstatic.net/8rID0.png The client app includes a proxy configuration in its package.json file: "proxy": "h ...

Is it possible for AJAX JSON response to return both accurate and undefined values sporadically?

In the process of developing JavaScript code to pinpoint the smallest unused number within a specified range of numbers, I encountered an issue with the AJAX request. Despite successfully retrieving all used numbers in the designated range, some undefined ...