Interface object properties are undefined but there are values in angular

Question

I call those APIs from Node Express server in service.ts and subscribe them in component.ts. I could check that responses were correct and able to copy it to interface object, and able to console.log them as well. However, I can't access each property of the object. When I console.log the object, it shows values with each property but can't see each one separately (shows undefined). Check the codes below.

this is interface to store response from get request

export interface LOLUserData {
  profileIconId: number;
  name: string;
  puuid: string
  summonerLevel: number;
  revisionDate: number;
  id: string;
  accountId: number;
  profileimg: string;
}

This is API from node express server

app.route("/api/profile/").get((req, res) => {
    fetch("https://na1.api.riotgames.com/lol/summoner/v4/summoners/by-name/" + req.query.name + "?api_key=RGAPI-e98dc13b")
        .then(res => res.json())
        .then(data => {
            res.send({ data });
        })
        .catch(err => {
            res.send(err);
        });
});

This is a service.ts

getdata(name: string): Observable<LOLUserData> {
    return this.http
      .get<LOLUserData>('http://localhost:8000/api/profile/', {
        params: {
          name: name
        }
      }).pipe(map(res => res))

This is subscribe

public heroes: LOLUserData; //interface object
getHeroes = (name: string) => {
    this.summonerService.getdata(name).subscribe(hero => {
      this.heroes = hero; //copies a response
      console.log(this.heroes); //I can see all properties here
      this.heroes.profileimg = this.url + this.heroes.profileIconId + ".png";
                                        //this.heroes.profileIconId is undefined
      this.submitted = true;
    }),
      error => this.setErrValue(this.heroes)
  }
}

I could check response from node express server, service.ts, and component.ts, so I don't think there is something wrong with response but I don't know why any single value from the response is shown undefined.

score 0 · Answer 1 · answered Apr 09 '20 at 02:36

0

I actually found out why it gave me undefined for each property. It was because a response is in object called "data" so I did it like heroes["data"].profileIcondId. However, I still don't understand why the response is in data object.

answered Apr 09 '20 at 02:36

dsoup2

193
2
16

score 0 · Accepted Answer · answered Dec 09 '20 at 13:54

look at the API from node express server. That sends an object called "data" and the response properties are inside this object, so... to get access to them, you need to navigate by

heroes.data.profileIconId

not

heroes.profileIconId

i had the same issue here but it was with a inject in a dialogbox, and solved searching by your question... Thanks

Interface object properties are undefined but there are values in angular

2 Answers2