Как получить доступ к вложенным службам необработанных данных, позвонив по json данным API в angular

Question

Я создал проект для извлечения данных из API веб-службы. Но у веб-службы есть вложенные массивы, которые тоже нужно отображать, как я могу получить доступ к данным из вложенных JSON массивов? Какой правильный способ записи в HTML для получения данных из веб-службы.

API

{
  "data": {
    "orders": {
      "total": 17,
      "data": [
        {
          "id": 10896,
          "createdAt": "2019-12-30T07:18:19.182Z",
          "amount": 6000,
          "dealer": {
            "company": {
              "name": "Wartspeed "
            }
          },
          "transactions": [
            {},
            {},
            {},
            {
              "stripe": {
                "status": "SUCCEEDED",
                "card": {
                  "funding": "unknown"
                }
              }
            },
            {
              "stripe": {
                "status": "REQUIRES_PAYMENT_METHOD",
                "card": null
              }
            },
            {},
            {
              "createdAt": "2019-12-30T07:18:19.187Z",
              "code": "T"
            }
          ]
        },

courseinfo.service

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders} from '@angular/common/http';
import 'rxjs/add/operator/map';
@Injectable({
  providedIn: 'root'
})
export class CourseinfoService {
   constructor(private http: HttpClient) { }
    getAboutPosts(){
    let headers = new HttpHeaders({'Content-Type':'application/json'});
    let ServerURL = 'https://qa.watspd.com/graphql';
     return this.http.post(ServerURL,{headers}).map(res => res );
    }  
}

courseinfo.component.ts

import { Component, OnInit } from '@angular/core';
import { CourseinfoService } from './courseinfo.service';
@Component({
selector: 'app-courseinfo',
templateUrl: './courseinfo.component.html',
})
export class CourseinfoComponent implements OnInit {
data:any;
constructor(private courseservice:CourseinfoService) { }
ngOnInit() {
this.courseservice.getAboutPosts().subscribe(res=>
{
console.log(res);
this.data=res;
}); }}

courseinfo.component. html

<div id="wrapper">
<div *ngFor="let post of data">
<p>{{data.createdAt}}</p>
<p>{{data.amount}}</p>
<p>{{data.name}}</p>
</div>
</div>

courseinfo.ts

export class data{
id: number;
createdAt: string;
amount: number;
}

Answer 1

Измените ngOnInit на:

import { map } from 'rxjs/operators';
....
ngOnInit() {
 this.courseservice.getAboutPosts().pipe(
   // pluck the data array
   map(res => res.data.data),
   // transform the array into an array that we want
   map(data => data.map(info => ({ id: info.id, createdAt: info.createdAt, amount: info.amount, name: info.dealer.company.name }))),
).subscribe(res=>
  {
   console.log(res);
   this.data = res;
  }); 
}

Мы получили id, createdAt, amount, name, и теперь вы можете поместить их в HTML, как и у вас.