Отображение вложенного объекта после извлечения из API

Question

Добрый день всем,

У меня возникли проблемы с отображением простых данных, предоставляемых службой API, содержащей объект NESTED json.

Причина, по которой мне дает "вложенная" часть Беда в том, что в большинстве уроков описывается, как отображать извлеченные данные только в том случае, если данные являются объектами массива (а не вложенными).

Вложенный объект из службы API в качестве такой структуры:

{
  "students": [
    {
      "city": "Fush\u00eb-Muhurr", 
      "company": "Yadel", 
      "email": "iorton0@imdb.com", 
      "firstName": "Ingaberg", 
      "grades": [
        "78", 
        "100", 
        "92", 
        "86", 
        "89", 
        "88", 
        "91", 
        "87"
      ], 
      "id": "1", 
      "lastName": "Orton", 
      "skill": "Oracle"
    }, 
    {
      "city": "Sanghan", 
      "company": "Avamm", 
      "email": "cboards1@weibo.com", 
      "firstName": "Clarke", 
      "grades": [
        "75", 
        "89", 
        "95", 
        "93", 
        "99", 
        "82", 
        "89", 
        "76"
      ], 
      "id": "2", 
      "lastName": "Boards", 
      "skill": "Sports"
    }]
}

, чтобы дать вам более ясное представление, объект массива (и тот, который НЕ доставляет мне проблем):

[
  {
    "userId": 1,
    "id": 1,
    "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
    "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
  },
  {
    "userId": 1,
    "id": 2,
    "title": "qui est esse",
    "body": "est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla"
  },
  {
    "userId": 1,
    "id": 3,
    "title": "ea molestias quasi exercitationem repellat qui ipsa sit aut",
    "body": "et iusto sed quo iure\nvoluptatem occaecati omnis eligendi aut ad\nvoluptatem doloribus vel accusantium quis pariatur\nmolestiae porro eius odio et labore et velit aut"
  },
  {
    "userId": 1,
    "id": 4,
    "title": "eum et est occaecati",
    "body": "ullam et saepe reiciendis voluptatem adipisci\nsit amet autem assumenda provident rerum culpa\nquis hic commodi nesciunt rem tenetur doloremque ipsam iure\nquis sunt voluptatem rerum illo velit"
  }]

В настоящее время я использую следующий код для получения объекта json из API:

import { Component } from '@angular/core';
import {HttpClient} from '@angular/common/http';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

constructor(private http: HttpClient){}

studentsList: any


getData(){
this.studentsList = this.http.get('apiurl.com(not shown)')

}
}

Как видите, это самый простой способ сделать это. Как я понимаю, getData () возвращает «Observable».

Теперь вот сложная часть. Как отобразить это наблюдаемое в шаблоне html? Я понимаю, как использовать ngFor, но сложность заключается в том, что мне нужно «получить доступ» к содержимому вложенного объекта, в частности к свойству «Students», которого в противном случае не было бы, если бы это был массив.

Для Ваша информация, код для отображения вариации массива (не вложенный вариант) выглядит следующим образом:

<button (click) = 'getData()'>Get Data</button>


<div *ngFor = 'let student of studentsList | async'>
{{student | json}}
</div>

Однако я не могу использовать вышеизложенное, поскольку оно не относится к вложенным объектам.

Размышляя об этой проблеме, можем ли мы преобразовать возвращаемое наблюдаемое в простой Javascript объект, прежде чем мы даже отправимся в шаблон html? Если это можно сделать, то доступ к контенту (и, следовательно, отображение его впоследствии с помощью ngFor) тривиален.

Я пробовал комбинации JSON .parse и JSON .stringify. Однако это не помогло, так как я считаю, что объект уже проанализирован с помощью метода get.

Надеюсь, я правильно задал вопрос, и спасибо за вашу помощь.

С уважением, Энди

Answer 1

Вам нужно подписаться на наблюдаемое, возвращаемое из HTTP-вызова, чтобы получить его содержимое.

getData() {
  this.http.get('apiurl.com(not shown)').subscribe(
    response => {
      this.studentsList = response;
    },
    error => {
      console.error('Error retrieving student properties ', error);
    }
  );
}

И в шаблоне вы можете сделать следующее

<div *ngFor='let student of studentsList?.students'>
  {{ student | json }}
</div>

async pipe больше не нужен, так как мы переходим не к наблюдаемому объекту, а к объекту.

?. в studentsList?.students является оператором безопасной навигации . Он защищает от доступа к значениям undefined и null в путях свойств. Здесь это необходимо, поскольку до вызова функции getData() доступ к studentsList.students вернет undefined, что приведет к ошибке.