在 Angular 中使用和解析 Spring Boot HATEOAS API 的嵌套响应答案

【问题标题】：Consuming and parsing Spring Boot HATEOAS API's nested response in Angular在 Angular 中使用和解析 Spring Boot HATEOAS API 的嵌套响应
【发布时间】：2023-01-24 14:24:50
【问题描述】：

我从后端 API 收到以下响应 JSON：

{
    "_embedded": {
        "vehicleListingList": [
            {
                "id": 1,
                "modelYear": "2022",
                "make": "Honda",
                "model": "Civic",
                "_links": {
                    "self": {
                        "href": "http://localhost:8080/listings/1"
                    },
                    "vehicleListings": {
                        "href": "http://localhost:8080/listings"
                    }
                }
            },
            {
                "id": 2,
                "modelYear": "2017",
                "make": "Honda",
                "model": "CR-V",
                "_links": {
                    "self": {
                        "href": "http://localhost:8080/listings/2"
                    },
                    "vehicleListings": {
                        "href": "http://localhost:8080/listings"
                    }
                }
            }
        ]
    },
    "_links": {
        "self": {
            "href": "http://localhost:8080/listings"
        }
    }
}

如何深入查看车辆列表并为我的 AppComponent HTML 模板解析数据？

应用程序组件.ts

import { HttpErrorResponse } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { VehicleListing } from './vehicle-listing';
import { VehicleListingService } from './vehicle-listing.service';

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

  constructor(private listingService: VehicleListingService) {}

  ngOnInit() {
    this.getListings();
  }

  public getListings(): void {
    this.listingService.getListings().subscribe(
      (response: VehicleListing[]) => {
        this.responseObj = response;
        console.log(this.responseObj);
      },
      (error: HttpErrorResponse) => {
        alert(error.message);
      }
    );
  }
}

我尝试使用 *ngFor遍历响应但响应的第一级并不是真正的迭代，或者至少我不需要遍历它，我只需要列表，所以这可能不是我后来意识到的解决方案，至少现在还没有.

【问题讨论】：

标签： angular spring-boot loops response spring-hateoas

【解决方案1】：

您的响应是一个对象，您可以在数组上使用 ngFor 而不是在对象上，因此您想要循环遍历 response._embedded.vehicleListingList 而不是响应本身。因此将 getListings 方法更改为

public getListings(): void {
    this.listingService.getListings().subscribe(
      (response) => {
        this.responseObj = response._embedded?.vehicleListingList;//here you need vehicleListingList not the whole response
        console.log(this.responseObj);
      },
      (error: HttpErrorResponse) => {
        alert(error.message);
      }
    );
  }

然后在 UI 上你可以做类似的事情

<ng-container *ngIf="responseObj">
<div *ngFor="let item of responseObj">{{item.modelYear}}</div>
</ng-container>

【讨论】：