How to fetch value from array which came from json in Angular 5 app?

Question

I have the following JSON definitions:

 export class Company {
      name: string;
      trips : Trip[] = [];
    }

export class Trip{
    id: number;
    name: string;        
}

I am able to see the trips in the console using:

console.log(this.company);

In the component I have the following method:

if(this.company) {
     Object.keys(this.company.trips).forEach((data) => {     
            console.log(data);                        
        });
}

What I am getting in the console is the trip's properties names which is "id" and "number". I would like to know how to access the value.

this.company.trips.forEach(trip => { console.log('trip.id', trip.id }) — Julien METRAL
– Julien METRAL, Commented Feb 21, 2019 at 10:21
"What I am getting in the console is the trip's properties names which is "id" and "number"." That's odd. You've said it's an array. The keys of an array are numeric strings ("0", "1", etc.), not things like "id" and "number". — T.J. Crowder
– T.J. Crowder, Commented Feb 21, 2019 at 10:23
On a side note: If these are representations of data coming from an api, I would strongly suggest that you make these interfaces instead, because these will not be instances of the class. You might be falling into a problem of testing for a constructor (instanceof) and not get what you expect. — Silvermind
– Silvermind, Commented Feb 21, 2019 at 10:24
Object.keys gives you the names of the own, enumerable, String-named properties of the object. If you want the values, you can use Object.values which returns an array of the values of those properties. If you want both, you can use Object.entries which returns an array of [key, value] arrays. Normally, though, you know the shape of the object and use its properties directly. — T.J. Crowder
– T.J. Crowder, Commented Feb 21, 2019 at 10:27

Thriller · Accepted Answer · 2019-02-21 10:32:17Z

0

According to your data structure, you should not even try to do Object.keys what you should be doing as the Trip is an object, is something like following in which you treat the iteration object as a real Trip object

if(this.company && this.company.trips){
this.company.trips.forEach((trip:Trip) => {     
            console.log(trip.id + '\n' + trip.name);                        
        });
}

if you have any issue with this piece of cod then make sure you are correctly doing your deserialization process and objects are getting cast properly.

answered Feb 21, 2019 at 10:32

Thriller

5054 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

16 Comments

user2304483 Over a year ago

I'm getting ERROR TypeError: this.company.trips.forEach is not a function

Thriller Over a year ago

@user2304483 then you are facing the casting issue as I thought. there is a library for casting I guess it might be a good idea to give it a go. github.com/typestack/class-transformer

Thriller Over a year ago

you might also take a look at this tread stackoverflow.com/questions/35969974/…

user2304483 Over a year ago

you mean the trips is not coming as array from the api ?

Thriller Over a year ago

No I mean the deserialization problems in Angular side when you try deserialize JSON coming from server to objects

|

Collectives™ on Stack Overflow

How to fetch value from array which came from json in Angular 5 app?

1 Answer 1

16 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

16 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related