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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.