javascript add data to a json

Question

i am working with angularJS and im pretty newbie. So i have a variable in the controller scope which looks like this.

$scope.emptyContact = {'contact_firstname':'', 'contact_lastname':''};

and i want to use this to reset the newContact json which i use to add data with a form. But when i do this:

$scope.newContact = $scope.emptyContact;

when i change something in the newContact variable, it also changes into emptyContact variable. Is there a way to give newContact variable the values from emptyContact without 'binding' their datas together ? Thank you, Daniel!

Use: docs.angularjs.org/api/angular.copy

Ivan Chernykh
– Ivan Chernykh

2013-10-06 10:51:44 +00:00
Commented Oct 6, 2013 at 10:51 — Ivan Chernykh
– Ivan Chernykh, Commented Oct 6, 2013 at 10:51

Ionică Bizău · Accepted Answer · 2013-10-06 10:54:22Z

1

Yes. That's happening because the reference to object is keept

a = {};     // a will be an empty object
b = a;      // b will be a (the reference is kept)
a === b     // return true
b.c = 12;   // set c key to b
a.c         // returns 12 because b is a and c is set to a, too

d = JSON.parse(JSON.stringify(a)); // clone a 
a === d                            // return false because d is not a
d.e = 13;                          // sets e key as 13
a.e                                // returns undefined because d is NOT a

So, I always prefer to use obj1 = JSON.parse(JSON.stringify(obj1)) to clone an object.

Your code becomes:

$scope.newContact = JSON.parse(JSON.stringify($scope.emptyContact));

or using angular.copy():

angular.copy($scope.emptyContact, $scope.newContact);

...and your emptyContact will not be changed.

answered Oct 6, 2013 at 10:54

Ionică Bizău

114k95 gold badges311 silver badges490 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Pacuraru Daniel Over a year ago

thank you very much, i will use the copy function from angular

Ionică Bizău Over a year ago

@PacuraruDaniel Send me your email address using my contact form from my SO profile and we will can talk more. ;-)

DJG · Accepted Answer · 2013-10-06 10:55:02Z

1

Change:

$scope.newContact = $scope.emptyContact;

to:

angular.copy($scope.emptyContact, $scope.newContact);

see: http://docs.angularjs.org/api/angular.copy

Explanation below:

In Javascript, when you assign one object to another, you are actually passing a reference, so both variables are actually referring to the same object.

Here is an example from a NodeJS repl:

> a = {'msg': 'hello'}
{ msg: 'hello' }
> b = a
{ msg: 'hello' }
> b.count = 50
50
> a
{ msg: 'hello', count: 50 }
>

In the above example, the reference from a is copied to b, to both a and b then point to the same value.

If you want to be able to change b without affecting a, you will need to make a clone of a instead of just copying the reference. Here is one way to do it:

b = JSON.parse(JSON.stringify(a))

with an example from the Node repl:

> a = {'msg': 'bye'}
{ msg: 'bye' }
> b = JSON.parse(JSON.stringify(a))
{ msg: 'bye' }
> b
{ msg: 'bye' }
> b.count = 55
55
> a
{ msg: 'bye' }
> b
{ msg: 'bye', count: 55 }
>

AngularJS actually has its own implementation of doing this, see http://docs.angularjs.org/api/angular.copy, which is what you should actually use when working with AngularJS.

edited Oct 6, 2013 at 10:55

answered Oct 6, 2013 at 10:49

DJG

6,6035 gold badges33 silver badges51 bronze badges

1 Comment

Pacuraru Daniel Over a year ago

this is great, thank you so much for this. i will use the copy from angular :)

Surender · Accepted Answer · 2013-10-06 11:00:31Z

1

$scope.emptyContact = function(){
    this.contact_firstname ='';
    this.contact_lastname = ''
};
$scope.newContact = new $scope.emptyContact();

This way you can create new objects from emptyContact.

answered Oct 6, 2013 at 11:00

Surender

7575 silver badges12 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 11:50:04Z

0

Cloning the Object will help you to achieve this

please have a look on following link

What is the most efficient way to deep clone an object in JavaScript?

edited May 23, 2017 at 11:50

CommunityBot

11 silver badge

answered Oct 6, 2013 at 10:49

PSK

1525 bronze badges

Collectives™ on Stack Overflow

javascript add data to a json

4 Answers 4

2 Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related