Angular 2 get json data and define it as new array in component

Question

I got my json file and I am getting it on the service. Then I am trying to subscribe to it in the component, but in console.log(this.jsonObj) I get empty array. Also if I write console.log(data) - I get json data.

Service :

objUrl = 'assets/jsons/obs.json';
constructor(private http: HttpClient) {
  console.log('Hello ObjectsProvider Provider');
}
getObjectsJson() {
  return this.http.get(this.objUrl);
}

Component :

jsonObj = {};
this.object.getObjectsJson().subscribe((data =>
  this.jsonObj = data
))
console.log(this.jsonObj)

Answer 1

Issue

You are trying to get the Asynchronous data in Synchronous fashion. You are logging the data console.log(this.jsonObj) outside of Observable. So it will get executed without waiting for the result to come from API.

Fix

Just move the log or any code you want to execute the after API inside subscribe. So you your code will look like

jsonObj = [];
this.object.getObjectsJson().subscribe((data =>
  this.jsonObj = data;
  console.log(this.jsonObj);  //<-- data will be appear here.
))

Answer 2

The service method is asynchronous, so the code inside the subscribe() (which makes the assignment) executes at some time in the future, when the http call returns. Your log statement is outside of the subscription, so it happens before the assignment. Try putting the log statement inside the subscription, right after the assignment.

Answer 3

console.log(this.jsonObj) will run before the response of the server. You can work with it as it is. It will run perfectly. you can test it like this

<p *ngIf="jsonObj !== undefined">{{jsonObj.field}}</p>

if you want to check it with console.log, just add it in the subscription like this

this.http.getObjectsJson().subscribe((data => {
      this.jsonObj = data
      console.log(this.jsonObj)
    }));"