Angular 2 - http get return wrong object

Question

I'm using @angular/http get to fetch data from server, here is my code :

private _currentPT: any;
public phongtroDetailChange = new Subject();

layPhongtro(id: number): Promise<any> {
return new Promise((resolve, reject) => {
  this.http
    .get(Constants.apiUrl + 'phongtro/' + id, { headers: Constants.headers })
    .map((resp: Response) => resp.json())
    .subscribe(resp => {
      console.log(resp);
      // if (!resp.result) {
      //   this._currentPT = resp;
      //   this.phongtroDetailChange.next(true);
      //   resolve(resp);
      // } else {
      //   this.handleError('layPhongtro', resp.result);
      //   reject(resp.result);
      // }
    },
    error => this.handleError('layPhongtro', error));
});
}

When I commented code like that, the property "tiencoc" of resp has right value which means its value is 0, here is the picture of console.log

https://i.sstatic.net/7oYGW.png

But when I uncommented, the value of "tiencoc" is the same as property "giatien", now its value is 1000000, here is picture of console.log when uncommented

https://i.sstatic.net/rGxdI.png

I dont know why ? Pls help me, thank you so much

P/s: I have tested with POSTMAN and the resp is OK, which means "tiencoc"'s value is 0

Answer 1

Here's a fiddle for demo: https://jsfiddle.net/Lg6L8n2m/ (guess what the value is before you look at the log :))

As I've mentioned it the comment when you JSON.stringify the response object you are printing that value (because strings are immutable in js). But without stringify, console.log works actually somewhat "asynchronously", console.log prints the latest value that the object has.

So you are changing the tientoc to be 1000000 somewhere in your code after your console.log. And console.log prints you the latest value. From what I see it might be in the block where you subscribe to your Subject phongtroDetailChange

I suggest reading Immutability in javascript about this problem.

Answer 2

Thanks @echonax, I am reading "Immutability in javascript" now :), And by the way I have found that in child component I have done this:

constructor(private ptService: PhongtroService) {
    this.init();
  }

ngOnInit() {
    this.ptService.phongtroDetailChange.subscribe(result => {
      if(result) {
        this.init();
      }
    });
}
init() {
  this.currentPT = this.ptService.currentPT;
  if(!this.currentPT.tiencoc || this.currentPT.tiencoc === 0) {
     this.currentPT.tiencoc = this.currentPT.giatien;
  }
}

I have stored the currentPT of ptService in currentPT of child component (this.currentPT), and then change value of this.currentPT

and in ptService

private _currentPT: any;
get currentPT(): any{
return this._currentPT;
}
set currentPT(pt) {
this._currentPT = pt;
}

and in layPhongtro function above

this._currentPT = resp;
this.phongtroDetailChange.next(true);

Some how, some way the code in child component also affects this resp