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: http://docs.angularjs.org/api/angular.copy – Ivan Chernykh Oct 06 '13 at 10:51 — Ivan Chernykh, Oct 06 '13 at 10:51

DJG · Answer 1 · 2013-10-06T10:55:02.157

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.

this is great, thank you so much for this. i will use the copy from angular :) — Pacuraru Daniel, Oct 06 '13 at 10:57

score 1 · Accepted Answer · answered Oct 06 '13 at 10:54

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.

thank you very much, i will use the copy function from angular — Pacuraru Daniel, Oct 06 '13 at 10:58
@PacuraruDaniel Send me your email address using my contact form from my SO profile and we will can talk more. ;-) — Ionică Bizău, Oct 06 '13 at 11:01

score 1 · Answer 3 · answered Oct 06 '13 at 11:00

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 06 '13 at 11:00

Surender

757
5
12

score 0 · Answer 4 · edited May 23 '17 at 11:50

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 '17 at 11:50

Community

1
1

answered Oct 06 '13 at 10:49

PSK

152
5

javascript add data to a json

4 Answers4