Почему вместо объекта отображается undefined (угловой HTTP-запрос)

Question

Я хочу получить массив из Spring Boot API и не могу правильно преобразовать данные в объект

Это моя модель:

export class Uczen {

  constructor(
    public firstname: string,
    public lastname: string,
    public email: string,
    public gender: string,

  ) {  }

}

service:

getPersons() {
    return this.http.get('http://localhost:8080/myApp/persons');
}

Это мой component.ts код

  osoby: Uczen[] = [];

ngOnInit() {
  this.personService.getPersons().subscribe((result: Uczen[]) => {
        for (const item of result) {
        this.osoby.push(item);
      }
  });
  console.log(this.osoby[1]);
  console.log(this.osoby.length);
}

я получаю "undefined" и "0" как дисплей, есть проблема с преобразованием json в массив объектов, вероятно; /

Answer 1

консоли должны быть внутри подписки, так как это асинхронная процедура

  this.personService.getPersons().subscribe((result: Uczen[]) => {
        for (const item of result) {
          this.osoby.push(item);
        }

       console.log(this.osoby[1]);
       console.log(this.osoby.length);
  });

Answer 2

В вашем файле ts есть метод ngOnInit (), ngOnInit - это хук жизненного цикла компонента, который запускается при инициализации компонента.

1) Изначально элемент управления вызывает метод getPersons (), и он будетнекоторое время (несколько миллисекунд) для получения ответа от вашего сервера.

2) Из-за асинхронного поведения, прежде чем мы получим ответ от удаленного сервера, элемент управления переходит к строке оператора консоли и выполняется.На данный момент переменная osoby по-прежнему является пустым массивом, поэтому вы получаете неопределенный доступ к первому элементу пустого массива.

3) Если вы пишете те же строки консоливнутри подписки управление этими строками будет идти только после получения ответа от вашего сервера.

  this.personService.getPersons().subscribe((result: Uczen[]) => {
    for (const item of result) {
      this.osoby.push(item);
    }

   console.log(this.osoby[1]);
   console.log(this.osoby.length);

  });