Json data showing up on webpage but not falling into table columns

Question

How would I go about getting each vehicle attribute to fall into their respective columns?

<tbody>
    <tr *ngFor="let vehicle of vehicles ">
        <td><pre>{{vehicle | json }}</pre></td>
        <td>{{vehicle.DecodedVehicleLeafId | json}}</td>
        <td>{{vehicle.Description | json}}</td>
        <td>{{vehicle.IsSummarizedData | json}}</td>
        <td>{{vehicle.IsActive | json}}</td>
        <td>{{vehicle.SourceBrandCode | json}}</td>
        <td>{{vehicle.Attribute1 | json}}</td>  
        <td><a [routerLink]="['/vehicles','edit', vehicle.VehicleCatalogId]">View</a></td>
    </tr>
</tbody>

export interface Vehicle { 
    VehicleCatalogId?: string;
    DecodedVehicleLeafId?: string;
    Description?: string;
    IsSummarizedData?: boolean;
    IsActive?: boolean;
    SourceBrandCode?: string;
    VehicleYear?: string;
    Attribute1?: string;
}

ngOnInit(): void { 
    this.vehiclesService.getAllVehicles()
    .subscribe({
      next: (vehicles) => {
        console.log(vehicles)
        this.vehicles = vehicles;
      },
      error: (response) => {
        console.log(response);
      }
    });
}

getAllVehicles(): Observable<Vehicle[]>{return this.http.get<Vehicle[]>(this.baseApiUrl + '/api/ingress');}

Webpage

I'm not super familiar with angular, but setting up tables is not too different from react or other javascript/html frameworks. Since your image shows the headers are set up fine, my guess is that it has to do with how you're mapping the rows. I found this post that seems to address your issue, needing to use a pipe to assist angular with the map, in the : https://stackoverflow.com/questions/31490713/iterate-over-object-in-angular/31537666#31537666 . Hope that helps — Jowz, Sep 27 '22 at 19:19
I updated my answer in hopes that it might help you find the problem. However, if it does not, please try to recreate the issue in a [Stackblitz](https://stackblitz.com/) and I will gladly help you find out the problem. — H3AR7B3A7, Sep 27 '22 at 20:45

H3AR7B3A7 · Answer 1 · 2022-09-27T20:41:08.737

Json pipe

You shouldn't have to pipe everything with the json pipe. That was just to help you see what is in the object.

Example

Here's a very basic example on Stackblitz. So, I don't see anything wrong with your initial approach to populating the table.

Possible Problem

You need to make sure the keys in your Vehicle interface map perfectly to those of the objects returned by your endpoint. They are case-sensitive, so are you sure they start with capital letters?

I notice you defined all the interface members as optional with ? (= elvis). If they aren't optional (like I would assume things like id aren't) they shouldn't be marked as such.

Json data showing up on webpage but not falling into table columns

1 Answers1

Json pipe

Example

Possible Problem