How to store json value in a variable when subscribing?

Question

I am getting json data by http call and subscribing like:-

this.localService.getdata('url').subscribe(
function (success) {
    this.dataa = success;
    this.dataa2 = success;
}
);

stackblitz link:- https://stackblitz.com/edit/angular-stackblitz-json-xr7ny8?file=src/app/app.component.ts

1) data.json value is assigned to variable dataa2 is changed and when method get2() is called dataa2 value is changing. Simultaneously, Same for variable test2.

2) How can I store data.json in a variable (eg- dataa2) without changing its value in given situation.

3) Why can't I store success in two variables without changing their values. How
to store success data in two variables without affecting each other. Do I need to subscribe every time for getting a copy of json data?

data.json

{
  "userId": 1,
  "id": 1,
  "title": "delectus aut autem",
  "completed": false
}

.html

<button type ="button" (click)="get()">tset</button>
<br/>
<br/>
<br/>
<button type ="button" (click)="get2()">tset2</button>

.ts

import { data } from './test';

export class AppComponent implements OnInit {
  name = 'Angular';
  dataa:any;
  dataa2:any;

  test ={
    'id':'abc'
  }

  test1:any;
  test2:any;
  constructor() {
  }

     ngOnInit() {
         this.dataa =  data;
        this.dataa2 =  data;

        this.test1 =  this.test;
         this.test2 =  this.test;
     }

  get(){
    this.dataa['userId'] = 2;
     this.dataa['id'] = 2;

      this.test1['id'] = 'I am changed';
  }


  get2(){
    console.log(JSON.stringify(this.dataa));
      console.log(JSON.stringify(this.dataa2));
  // should be===>  this.dataa2 =  {
   //           "userId": 1,
   //            "id": 1,
   //          "title": "delectus aut autem",
   //        "completed": false
   //           }
      console.log(JSON.stringify(this.test1));
      console.log(JSON.stringify(this.test2));
  }
}

Why can't I store success in two variables without changing their values. Why do I need to susbscribe every time. How to do without subscribing each time. — Mahi, Jan 15 '19 at 18:59
`this.dataa2 = Object.assign({}, this.dataa);` would make a separate copy if that's what you're trying to do — abney317, Jan 15 '19 at 19:06
@abney, thanks. this.dataa = data; this.dataa2 = data;. why Its not working? — Mahi, Jan 15 '19 at 19:16
You aren't creating a copy of the data when doing that, you're creating a reference to the already existing object. — abney317, Jan 15 '19 at 19:21
Ok, but what if.... data = 2; this.dataa = data; this.dataa2 = data; and we change the this.dataa = 5 onclick of a button , then this.dataa2 will be 2 (its retaining value) — Mahi, Jan 15 '19 at 19:28
That is because 2 isn't an object. Here's another stackoverflow answer you can check out https://stackoverflow.com/a/6605700/391715 — abney317, Jan 16 '19 at 04:09

score 0 · Accepted Answer · answered Jan 16 '19 at 17:51

When assigning a value to a variable in javascript, the variable keeps it's own copy of that value. This is not the case exactly when you assign an object to a variable.

If you assign the same object to 2 variable, any changes on properties to the object will be seen by all variables that are referencing that object.

A way to create a copy of an object where the properties can be manipulated separately would be like this:

this.dataa2 = Object.assign({}, this.dataa);

How to store json value in a variable when subscribing?

data.json

.html

.ts

1 Answers1