Consuming and parsing Spring Boot HATEOAS API's nested response in Angular-CodePudding

I have the following response JSON that I'm receiving from my back-end API:

{
    "_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"
        }
    }
}

How do I drill down to the vehicle listing list and parse the data for my AppComponent HTML template?

app.component.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);
      }
    );
  }
}

I tried using *ngFor to loop through the response but the first level of the response is not really iterating, or at least I don't need to through it, I just need the listing list,so that's probably not my solution I later realized, at least not yet.

CodePudding user response：

Your response is an object and you can use ngFor over an array only not on object so you want to loop over response._embedded.vehicleListingList instead of response itself.So change your getListings method to

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);
      }
    );
  }

Then on UI you can do something like

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