0

My API returns a JSON response my Angular application picks-up using an Interface. The JSON that gets returned looks like this:

    {
       "release_date":"2012-03-14",
       "genre_relation":[
          {
             "id":"2604ebbf-4eb5-46e3-89d8-ab4e8ecc8275",
             "name":"ABC"
          },
          {
             "id":"5267a0c6-9423-4e28-a413-133cc3435612",
             "name":"DEF"
          },
          {
             "id":"13d1454a-fc0e-457c-9f8e-9a9952984d8c",
             "name":"GHI"
          }
       ]
    }

Now my question, How I can access the name field of the response as it nested? For example, if I do the following at my template:

    <p>{{ api_response.genre_relation.name }}</p>

.name is not resolving. Do I have to do this on Interface level? Currently, my Interface looks really flat:

    export interface SomeResponse {
      release_date: string;
      genre_relation: string;
    }

Kind regards and thanks in advance.

Improve this question
2
  • Can you provide an example how this has to look like? Commented Sep 22, 2022 at 14:57
  • Setup another interface export interface GenreRelation { id: string, name: string }. then replace genre_relation: string by genre_relation: Array<GenreRelation>. Commented Sep 22, 2022 at 15:02

5 Answers 5

Reset to default
2

genre_relation is an array of objects. So you have to iterate through that array and access each object in the array separately. You can do that with ngFor:

<p *ngFor="let item of api_response.genre_relation">
  {{ item.name }}
</p>
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

I still don't get the name field to resolve :(
Can you add your Component .ts file in the question. The part where you are setting the api_response property.
1

The name field is on an object that is in the array genre_relation.

So you would access it by iterating through the array and then display or by index such as

api_response.genre_relation[0].name
Improve this answer

Comments

0

You should have the interface for the objects you have in your json. If you do then it will help you in intellisense too. You can add something like this:

export interface SomeResponse {
  release_date: string;
  genre_relation: genre[]; // <----add it here
}

export interface genre {
  id: string;
  name: string;
}

Now in your template you can have a *ngFor iteration to iterate over the genre list:

<div *ngFor="let genre of api_response.genre_relation">
   <p>{{ genre.name }}</p>
</div>
Improve this answer

1 Comment

Basically what I put up in the comments
0

genre_relation is an array so it would be api_response.genre_relation[i].name where i is the index of your object

Improve this answer

1 Comment

Okay, and what if I simply want to have a comma separated list of all names of all objects of my array?
0

Like in the other solutions, you can access the name using indexes.

<p *ngFor="let relation of api_response.genre_relation">
  {{ relation.name }}
</p>

Also you should change your interface like,

    export interface SomeResponse {
      release_date: string;
      genre_relation: { id: string, name: string }[];
    }
Improve this answer

2 Comments

It seems a copy of the selected answer. You have not contributed anything here.
I haven't seen the selected post before I post mine (I didn't reload the page). Please refer the time difference