Unable to accurately compare the original array with a deep clone

I am currently testing the similarity between my deep clone of an array and the original object (using jQuery).

Here is the method I used to clone it:

self.slides = jQuery.extend(true, {}, parent.modules[self.moduleId].composed);

However, I have noticed that even though the content I'm interested in is the same, the two objects are slightly different. When I inspect them in the Chrome console, this is how they appear:

Original object:

[Object]
0: Object
length: 1
__proto__: Array[0]

Clone:

Object {0: Object}
0: Object
__proto__: Object

It seems that the clone is recognized as an object, while the original is seen as an array.

Is there a different cloning method I should use or how can I accurately test their similarity?

javascriptarraysobjectclone

Answer №1

One of the easiest methods to duplicate any object is:

var array1 = [1, [2], 3];
var array2 = JSON.parse(JSON.stringify(array1));

You can compare them using this code snippet:

console.log(array1, array2);
// [ 1, [ 2 ], 3 ] [ 1, [ 2 ], 3 ]

array1[1][0] += 3;

console.log(array1, array2);
// [ 1, [ 5 ], 3 ] [ 1, [ 2 ], 3 ]

Answer №2

the reason for this issue is due to attempting to clone an object "{}" using the extender method, it would be more effective to use the following:

var clonedArray = myArray.slice(0);

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

Using React.js to add MongoDB documents into the database

Is there a way to directly insert documents into a MongoDB collection from a React component? I have been working on a personal project, which is a chat web application used for training purposes. For instance, when a user wants to post a new message in a ...

javascriptmongodbreactjsexpress

The Bootstrap modal seems unable to bring the button back

Despite my code functioning properly, the button is not going backward after being clicked. Check out my output here <a href="#myModal" role="button" class="btn btn-large btn-primary" data-toggle="modal">Launch Demo Modal</a> Here is the HTML ...

javascriptasp.net-mvcbootstrap-modalbootstrap-4

Would it be unwise to create a link to a database directly from the client?

If I want to connect my React app to Snowflake all client-side, are there any potential issues? This web app is not public-facing and can only be accessed by being part of our VPN network. I came across this Stack Overflow discussion about making API cal ...

javascriptnode.jsreactjsrestclient

Generate TypeScript type definitions for environment variables in my configuration file using code

Imagine I have a configuration file named .env.local: SOME_VAR="this is very secret" SOME_OTHER_VAR="this is not so secret, but needs to be different during tests" Is there a way to create a TypeScript type based on the keys in this fi ...

javascriptnode.jstypescriptenvironment-variables

Having trouble with sslforfree on Node.js Express.js platform

When attempting to set up an HTTPS server using Node.js and Express.js with sslforfree, I encounter an error 403: access denied when trying to access https://localhost. My folder structure looks like this: https://i.sstatic.net/NZqZT.png Below is my serve ...

javascriptnode.jsexpresshttpsssl-certificate

Choose the span element that is contained within multiple div elements

Is there a way to target a specific span tag and change the text color to white without using IDs? I am trying to modify the CSS of the friend section on a page but cannot add any IDs. This is for the friend section on the website younow. <div id="left ...

javascriptjqueryhtmlcss

Tips for dynamically validating a Django form field as it is being typed

Is there a way to validate a Django form field as the user types? For instance, I want to check if a username already exists in the database. def clean_username(self): username = self.cleaned_data['username'] if User.objects.filter(user ...

javascriptdjangodjango-forms

Which specific element should the userEvent.type(...) function target in order to work effectively with MUI's DesktopDatePicker TextField component?

Is there a way for me to input text into the TextField input within the MUI datepicker using react-testing-library's user-event? I've noticed that there is a mask applied to the input. I attempted to use userEvent.type(inputEl, '1') an ...

javascriptmaterial-uidatepickerreact-testing-libraryuser-event

Utilize AJAX in JavaScript file

I am encountering an issue with the following code: function inicioConsultar(){ $(function(){ $('#serviciosU').change(function(){ if ($('#serviciosU').val()!= "-1") { $.ajax({ url: "@Url. ...

javascriptjqueryhtmlajax

Reading Useless Information from an Input File

In my C++ program, I am working with reading a file in chunks that contain integers (two per line). To begin, I am using the following code snippet to determine the length of the file: input.seekg(0, input.end); int length = input.tellg(); input.seekg(0, ...

c++arrayscharfstream

Executing Javascript to populate a div element with content based on its CSS class

Is there a way to isolate my View (HTML & CSS files) within a controller like JavascriptCode/AJAX, so that upon page load, only the controller binds the data to a specific element such as a DIV based on its class? Do you think this is achievable? If so, ...

javascriptjqueryhtmlcss

Preserve the custom hook's return value in the component's state

I am currently facing a challenge in saving a value obtained from a custom hook, which fetches data from the server, into the state of a functional component using useState. This is necessary because I anticipate changes to this value, requiring a rerender ...

javascriptreactjstypescriptreact-nativereact-hooks

How can we store 32-bit integers in an array in C programming and what data type should be used?

I have a collection of 32-bit integers that I need to store in a dynamically allocated array and then share this array with other processes using MPI. int32_t data; I'm unsure about which data type I should use in order to create an array of, let&ap ...

carraystypesinteger

How can communication be established between JavaScript and a .NET app?

I've been developing a help system using HTML, and I want to include clickable links that can trigger commands in a .NET application (such as guiding users through tutorials or workflows). I have explored the TCard() method for HTML help, but it seems ...

.netjavascript

How can I use `app.js` in Zendesk to connect to an external API using the complete URL

As someone new to developing Zendesk apps, I've been following the step-by-step guide available here. To Summarize I'm facing an issue with passing external API URLs to the AJAX call syntax within Zendesk's app.js file. You can find my sim ...

javascriptapizendesk-app

Steps for invoking a function in the parent component from the child component

Within my main Class, I have a function named addFunc. This function calls the RenderItem function to display a list of items. Each item in this list has an onClick event that is supposed to trigger the addFunc function. The challenge I am facing is the i ...

javascriptreactjscomponentsreact-state

Using NodeJS and EJS to Display MySQL Query Results

I am currently working on a project where I need to display data retrieved from a MySQL query in an HTML table. However, when I attempt to do so, I encounter the following output: [object Object],[object Object],[object Object],[object Object],[object Obj ...

javascripthtmlmysqlnode.jsejs

Using Angular 2+ to make HTTP POST requests and interact with the GDrive API. Implementing resumable file uploads

I am currently facing a challenge with uploading files to Google Drive using Angular 2. I have managed to upload files successfully, but they end up being labeled as "Untitled" without any title. Below is the code snippet I am using for the upload process ...

javascriptangulartypescriptgoogle-drive-api

What sets apart using the loadText function from loadText() in JavaScript?

I've implemented a basic JS function that loads text lines into an unordered list. Javascript function loadText() { document.getElementById("text1").innerHTML = "Line 1"; document.getElementById("text2").innerHTML = "Line 2"; document.ge ...

javascripthtmldom

Ways to set the base URL on the development server for a call to react-scripts start

I am facing an issue with configuring my primary PHP server to run the ReactJS dev server created using yarn start within a directory named /reactive on the PHP site (using nginx proxy_pass). The problem is that I cannot set the root of the node server to ...

javascriptreactjsnginx