Angular 2 получает данные JSON и определяет их как новый массив в компоненте

Question

Я получил свой файл JSON и получаю его на сервисе.Затем я пытаюсь подписаться на него в компоненте, но в console.log(this.jsonObj) я получаю пустой массив.Также, если я пишу console.log(data) - я получаю данные json.

Сервис:

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

Компонент:

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

Answer 1

Issue

Вы пытаетесь получить данные Asynchronous в режиме Synchronous.Вы регистрируете данные console.log(this.jsonObj) за пределами Observable.Таким образом, он будет выполнен без ожидания получения результата от API.

Fix

Просто переместите журнал или любой код, который вы хотите выполнить, после API внутри subscribe.Так что ваш код будет выглядеть как

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

Answer 2

console.log (this.jsonObj) будет запущен до ответа сервера.Вы можете работать с ним как есть.Это будет работать отлично.вы можете проверить это следующим образом

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

, если вы хотите проверить это с console.log, просто добавьте его в подписку следующим образом

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

Answer 3

Сервисный метод является асинхронным, поэтому код внутри подписки () (которая выполняет назначение) выполняется в будущем, когда возвращается вызов http.Ваша выписка из журнала находится за пределами подписки, поэтому это происходит до назначения.Попробуйте поместить запись журнала в подписку сразу после назначения.