I require a duplicate of the original data. Direct references are unnecessary

I am trying to extract the value of data.notes. After implementing the code below, I noticed that the detailsOfCurrentNotes value changes based on the data.notes. Can anyone provide guidance on how to resolve this issue?

notes :Note[]

 const detailsOfCurrentNotes = Object.assign({}, data.notes);
 //the value of data.notes is being modified
 // detailsOfCurrentNotes reflects these modifications as well

Answer №1

To make a deep copy of an object or array that is not circular, you can use this straightforward method:

const copiedNotes = JSON.parse(JSON.stringify(originalData.notes));

Answer №2

When the variable notes is an array, there are a couple of ways to create a shallow copy:

const detailsOfCurrentNotes = Object.assign([], data.notes);

Alternatively, you can use a shorter syntax:

const detailsOfCurrentNotes = [...data.notes];

Both methods achieve the same result of creating a shallow copy of the original array.

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

Encountering issues with reassigning variables in Angular resulting in null or undefined values

Currently, I am dealing with a test array where the initial value is set to null. In my function, I am making some modifications to the test array. However, even though I am reassigning values to it, the console still shows it as a null or undefined array ...

The $scope property is successfully updated in the test browser, but unfortunately, it does not reflect

sample document: describe('$rootScope', function() { describe('$on', function() { var credentials = "Basic abcd1234"; var $scope; var $rootScope; var $httpBackend; ... beforeEach(inje ...

Tips for making multiple views function with angularjs' ui-router

I attempted to follow the instructions provided here but I am unable to make it work. https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views I made sure that my bootstrap grid divs were functioning correctly by placing them all in index.html an ...

The loading GIF in jQuery is malfunctioning when displayed simultaneously on multiple div elements

I am currently working on my Laravel dashboard's blade to showcase various statistics. These stats will be updated whenever the date picker is changed. Below is the code for my date picker: <div class="row"> <div class=&qu ...

What is the process for incorporating a standalone custom directive into a non-standalone component in Angular?

Implementing a custom directive in a non-standalone component I have developed a custom structural directive and I would like to use it across multiple components. Everything functions as expected when it is not standalone, but encountering an error when ...

Order of execution in Single Page Applications when using multiple files: understanding the Javascript async defer concept

I am currently working on enhancing the performance of my webpage, which is built using EmberJS. One strategy I'm considering is utilizing `asyc` and `defer` attributes for our Javascript files. I have already implemented other optimizations such as ...

Ensuring that Vue3 Typescript app focuses on input element within Bootstrap modal upon opening

I am facing a challenge with setting the focus on a specific text input element within a modal dialog. I have tried various methods but none seem to achieve the desired outcome. Here is what I have attempted: Attempt 1: Using autofocus attribute. <inpu ...

Java code to extract and delete a section of a website on a webpage

@Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState){ View view = inflater.inflate(R.layout.fwebview, container, false); webView = (WebView) view.findViewById(R.id.webView); String url = ge ...

Experiencing difficulties integrating relational data with Angular and MongoDB

I have a view where I display 'Transporters'. Each Transporter has multiple 'Deliveries', so I want to associate Deliveries with the corresponding Transporters. My tech stack includes express, mongoose, and angular.js. Here are my mode ...

The toggle button in the navbar takes its time to vanish completely

Every time I try to close my navbar, it seems to take forever for the navbar to disappear. Below is the code snippet: HTML <!-- logo --> <div class="logo"> <img src="assets/logo.png" alt="logo g's s ...

Using a Promise to signal the completion of certain tasks

In our application, we have multiple controllers assigned to different tabs/pages. I am looking for a way to signal the completion of a task in one controller so that it can be used in another controller. I believe Promises are the solution for this, and I ...

Express.js Routes with Prefix

Is it possible to add a prefix to only certain routes in express.js? I understand that using app.router() allows for adding a mount point, but this applies to all routes. I'm interested in finding a method to insert /api/v1/ before several routes wit ...

Retrieve JSON data from a PHP script to be used in an Angular scope

I am attempting to retrieve JSON data from a PHP file to use in an Angular controller. I have used json_encode(pg_fetch_assoc($result)); within the PHP file and when I check with console.log($scope.contents); in the Angular controller, the JSON data is ret ...

I encountered an issue while using WooCommerce where I needed the "color section" product attribute to be hidden or disabled when a customer clicked on "stock" in the product price. Unfortunately, I'm unsure of how

function hideStock(){ var selected = document.getElementById("stk"); var hidden = document.getElementById("pa_color"); if (selected.onchange=="stock") { hidden.style.display = "none"; } } <table class= ...

What is the process for retrieving matched information from a drop-down menu in HTML?

Is there a way to retrieve data from angularjs like this: This is the list of data I need to access: $scope.orderStatus = [ { os: 'Open', value: 1 }, { os: 'Completed', value: 2 }, { os:'Cancelled',value: 3 }, ...

Utilizing jQuery to configure multiple selection options within OptGroup elements

I am working with a Multi-Select list that has OptGroups set up in the following way: <select multiple="multiple" id="idCountry"> <optgroup label="ASIA"> <option value="AUSTRALIA">AUSTRALIA</option> <option value ...

Tips for effectively managing Angular JS dependencies and promoting modularity

As I embark on a new project from the ground up, my main focus is creating a responsive website optimized for mobile devices. In order to achieve this goal, I am seeking information about Angular: How does Angular manage its resources and dependencie ...

Sharing data between controllers in AngularJS is a key feature that enables seamless

There are two controllers: one controller will write data into an object and the other controller needs to read it. Is it possible to have a global variable in my app.js file that can be accessed by both controllers? I'm unsure why one would need to u ...

The issue with setTimeout not functioning within a For loop

I'm currently working on a Discord.js bot and I want to implement a spam command that sends messages every 750ms. The issue I'm facing is that there's a delay of 750ms before the first message is sent, but then the subsequent messages are se ...

Why is the HTML page showing VBS script code instead of executing it as intended?

After creating a simple ASP page to display data from AD in a table, I decided to move the code to an HTML file for easier linking throughout the website. When opening "abc.html," all that displayed was an empty document with the ASP code enclosed in scrip ...