Cloning an object in javascript

Question

Below are the first logs 0, and then logs 1. How to save a copy of the object, and not a link to it?

debug.log(vi.details.segment); vi.nextSegment = vi.details; vi.nextSegment.segment++; debug.log(vi.details.segment); 

Answer 1

To clone an object in jQuery:

 var vi.nextSegment = jQuery.extend({}, vi.details); 

NOTE. The above information is a shallow copy: any nested objects or arrays will be copied by reference - this means that any changes you make to vi.nextSegment.obj[prop] will be reflected in vi.details.obj[prop] . If you want a completely new object that is completely separate from the original, you need to make a deep copy (pass true as the first parameter):

 var vi.nextSegment = jQuery.extend(true, {}, vi.details); 

To learn more about the extension, see here.

Answer 2

Take a look at the post: What is the most efficient way to clone a javascript object

According to John Resig's answer:

 // Shallow copy var newObject = jQuery.extend({}, oldObject); // Deep copy var newObject = jQuery.extend(true, {}, oldObject); 

See the jQuery documentation for more details.

Answer 3

This worked better for me to clone an object using jQuery "parseJSON ()" and "JSON.stringify ()"

 $.ajax({ url: 'ajax/test.html', dataType: 'json', success: function(data) { var objY = $.parseJSON(JSON.stringify(data)); var objX = $.parseJSON(JSON.stringify(data)); } }); 

The data cloning object in objX and objY are two different objects, you do not need to spoil the problem "by reference"

Gracias!

Answer 4

Another way to clone an object is

 newObj = JSON.parse(JSON.stringify(oldObj)); 

But be careful if it contains dates. In this case, JSON.parse will return date.toString () instead of the date.

Answer 5

This is how I copy elements several times:

First I have a template:

 <div class="forms-container"> <div class="form-template"> First Name <input> .. a lot of other data ... Last Name <input> <div> <button onclick="add_another();">Add another!</button> <div> 

Now JavaScript:

 function add_another(){ jQuery(".form-template").clone().appendTo(".forms-container"); } 

Answer 6

Try Immutable.js :

Since jQuery mainly deals with DOM Elements , this may not be the best tool for the job. Immutable.js is a 56 kb (minified) library created by Facebook .

 // roughly implementing import Immutable from 'immutable' // const oldObj = { foo: 'bar', bar: 'baz' } // create a map from the oldObj and then convert it to JS Object const newObj = Immutable.Map(oldObj).toJS() 

So you effectively cloned newObj from oldObj . Basically, if you don't already have a Map , then we need to create a Map first. The map is similar to blue-print , which we work with to create copies .

References:

Home - Immutable

Documents - Immutable Documents

GitHub - Immutable @GitHub

Good luck.