CODEWITHSUNDEEP
angulartypescript
Bruno Smith
Bruno Smith

Reputation: 35

How do I show the values of an array I'm calling from an API in html?

This is the interface of the json I get from the API.

        export interface Subclass {
            url: string;
            name: string;
        }
        export interface TheClass {
            index: string;
            name: string;
            hit_die: number;
            subclasses: Subclass[];
            url: string;
        }

{"_id":"5ecc9ace0b1bb138c5431c12","index":"rogue","name":"Rogue","hit_die":8,"subclasses":[{"url":"/api/subclasses/thief","name":"Thief"}],"url":"/api/classes/rogue"}

Following code is where I subscribe to the API

  setFieldsClass(value: string){
    this.OnlineAPIService.getClasses(value).subscribe(data=>{
      this.TheClass = data;

Where GetClasses is the following

 getClasses(value: string){
    return this.client.get<TheClass>("http://www.dnd5eapi.co/api/classes/"+value);
  }

<table *ngIf="TheClass">

        <tr>

            <th>name</th>
            <th>hit_die</th>
            <th>subclasses</th>
            <th>url</th>
        </tr>
        <tr  style="text-align:center">

            <td>{{TheClass.name}}</td>
            <td>{{TheClass.hit_die}}</td>
            <td>{{TheClass.subclasses}}</td>
            <td>{{TheClass.url}}</td>
        </tr>
</table>

Now it will show me the name, hit die and url just fine but for the subclasses it will say Object object. How can I show the values of this array, specifically Name? Example

Upvotes: 0

Views: 42

Answers (2)

Supun De Silva
Supun De Silva

Reputation: 1487

I believe this will solve it. Note that I am using Bootstrap

https://stackblitz.com/edit/angular-ivy-e1ushq

Upvotes: 0

Robby Cornelissen
Robby Cornelissen

Reputation: 97150

An easy way to show the names of the subclasses would be to use ngFor to loop over them and display their names:

<td>
    <div *ngFor="let sc of TheClass.subclasses">{{ sc.name }}</div>
</td>

Upvotes: 2

Related Questions