Any modifications made to a copied object will result in changes to the original object

The original object is being affected when changes are made to the cloned object.

const original = {
    "appList": [{
        "appId": "app-1",
        "serviceList": [{
            "service": "service-1",
            "mList": ["somedata"]
        },{
            "service": "service-2",
            "mList": []
        },{
            "service": "service-3",
            "mList": []
        }]
    }]
}
const clone = Object.assign({}, original);

Attempting to make the following change:

clone.appList = clone.appList.filter(app => app.appId == 'app-1').map( app => {
  let serviceList = [...app.serviceList];
  if(app.serviceList && app.serviceList.length) {
    app.serviceList = serviceList.filter(service => {
      const { mList } = service;
      return mList && mList.length;
    });
  }
  return app;
});

Notice that even the original object gets updated:

console.log(clone);
console.log(original);

Answer №1

To achieve a deep copy of your Object, it is important to utilize the appropriate methods.

One method involves using V8's deep copy functionality, currently available in NodeJS and potentially coming to Browsers in the future:

const structuredClone = obj => {
  return v8.deserialize(v8.serialize(obj));
};

In modern browsers, there are alternative approaches that may not work with functions but can serve the purpose, such as:

const structuredClone = obj => {
  const oldState = history.state;
  history.replaceState(obj, null);
  const clonedObj = history.state;
  history.replaceState(oldState, null);
  return clonedObj;
};

Furthermore, certain libraries like lodash or jQuery offer built-in deep cloning capabilities. For those not utilizing these libraries, just-clone is a lightweight option specifically for deep cloning needs:

jQuery (https://api.jquery.com/jQuery.extend/):

jQuery.extend(true, { }, oldObject);

lodash (https://lodash.com/docs/#cloneDeep):

_.cloneDeep(oldObject);

just-clone (https://github.com/angus-c/just/tree/master/packages/collection-clone):

clone(oldObject);

For further insights on this topic, you may find valuable information in related answers found here:

Or

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

How can I send data in JSON format to a JavaScript AJAX request?

I've created a method that looks like this: public String getUTResult() throws IOException { BuildResultParser bp = new BuildResultParser(); BuildResultBean b = bp.getreadFile("C:\\bc.txt"); String str = b.getuTresult(); ...

Is there a way in Python to translate JavascriptSerializer into a datetime object?

My JSON file contains date and time in the format generated by JavascriptSerializer, shown below: {"StartDate": "/Date(1519171200000)/", "EndDate": "/Date(1519257600000)/",} How can I convert it to datetime formats like these? "2012-04-23T18:25:43.511Z" ...

"Discovering a button press using the Gamepad API: A Step-by-Step Guide

I'm currently building a web page that can detect button presses on an Xbox controller and display a boolean value based on the pressed button. Right now, I have successfully managed to detect when a controller is connected and show it as a string. Ho ...

Creating Dynamic Input Binding in Vue.js with an Array of Computed Properties

Currently, I am faced with a situation where I need the v-model binding of an input field to be determined by the computed property's returned value. Take a look at the example provided below: <!DOCTYPE html> <html> <head> <scri ...

Displaying the most recent queries retrieved from a search API

Our web application built on angular.js utilizes a REST search API to query users within the system. The endpoint for searching users is: search/user?q='abc' Upon revisiting the web application, we aim to display the user's recent search ...

Experience the power of module federation in Next JS without using the @module-federation/nextjs-mf package

Currently transitioning from Java to JavaScript, I am working on a Next.js project. I have a requirement to share the client component from this Next.js project with another project built on React. Upon discovering module federation, I successfully created ...

Using jQuery to scroll within a table

I am currently working on a project that involves displaying specific data rows. To achieve this, I have decided to use a table. For a better understanding, you can check out a table demo here. The issue I am facing is that whenever I change the selected ...

WebStorm displays all imported items as unused in a TypeScript backend project

https://i.stack.imgur.com/J0yZw.png It appears that the image does not display correctly for files with a .ts extension. Additionally, in .tsx files, it still does not work. In other projects using WebStorm, everything works fine, but those projects are o ...

I seem to be having trouble using my markers on my istamap

function initialize() { var mapProp = { center:new google.maps.LatLng(51.508742,-0.120850), zoom:5, mapTypeId:google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("googleMap"),mapProp); var marker = new ...

Ajax is unintentionally duplicating the request

When the "async" parameter is set to "true", ajax sends two requests at the same time. But, when it is set to "false", there are no issues. To prevent the page from reloading, I am using the following code: $(document).ready(function() { $(document).on(& ...

What methods should I use to modify the upcoming array of objects?

I have been struggling with this exercise for about an hour now, and I can't figure it out. Can someone please help me with this? Here is the array that I retrieved from the database: View Base Array Image let data = [ { "name": "October : 2019", "u ...

Can the dashstyle be configured for a solid-gauge chart in Highcharts?

I am having trouble making the border dashed on my pie chart. It seems that the solution provided for solidgauge charts is not working as expected. Interestingly, the graph property is undefined for solidgauge charts. I wonder if the dashed style could be ...

Check to see if the user has been redirected to the page using JavaScript

When a file input validation fails in a Laravel project, the user is redirected back to the current page. However, the issue arises when the user has to scroll down to see the error message and understand what went wrong. This doesn't provide the bes ...

PHP - retrieve a one-dimensional array from a key-value paired array

I have an array that contains different elements, and I need to extract all the values that come before the 'id' key and store them in a separate array. For example: arry('12', '10', '11', '9') [ ...

How can I update an image source using JavaScript in a Django project?

Is it possible to dynamically change the image src using onclick without relying on hard paths or Django template tags? I have concerns that this may not be best practice. How can I implement a method to inject/change the ""{% static 'indv_proj&b ...

Show the value of an array index in JavaScript

Imagine retrieving data from a local API using the code snippet below: {console.log("Bin", this.state.rows.filter(qc => qc.BinsByDayByOrchardsQCs.length > 0).map((bin) => bin))} The output you get may look something like this: 0: {…} ...

Looking to update the display of an array received in JSON format and then show it using ng-repeat?

Upon receiving a response from the backend, I am saving it in a variable called "allinfo" in my controller. The data received includes the name, date of birth, and hobby of a person. The hobby is an array that can contain any number of elements. In my vie ...

Please proceed with submitting your choices in the order that you have selected

My goal is to submit options from a dropdown list in the order they are selected, rather than in the order they appear in the list. How can I achieve this? Here is the HTML code for the dropdown: < select style = "padding: 1em;" name = "skills" multi ...

When using GTM dataLayer .push, a fresh object is generated rather than simply appending it to the current dataLayer

I am in the process of setting up a dataLayer for my website, but I have encountered an issue. My understanding is that Google Tag Manager dataLayer functions in a way where you have one central dataLayer object containing all the data variables. Each tim ...

Transform gradient backgrounds as the mouse moves

I'm attempting to create a unique gradient effect based on the cursor position. The code below successfully changes the background color of the document body using $(document.body).css('background','rgb('+rgb.join(',')+&a ...