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.

Answer 1

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 😎