0

I have a question about a nested JSON object. In our server, in the path "/dev/api/sportstypes/2", there is an object like this;

{
    "NBA": {
        "link": "https://www.nba.com/",
        "ticketPrice": 50
    },
    "UEFA": {
        "link": "https://www.uefa.com/",
        "ticketPrice": 39
    },
    "CL": {
        "link": "https://www.uefa.com/uefachampionsleague/",
        "ticketPrice": 76
    },
    "EuroLeague": {
        "link": "https://www.euroleague.net/",
        "ticketPrice": 42
    }
}

I believe this is an nested JSON object because it does have multiple little objects in it. My class for sports is like this;

export class Sports {
     link: string; //THE WEBSITE LINK OF THE SPORTS ASSOCIATION 
     ticketPrice: number; //THE AVG TICKET PRICE FOR THAT ASSOCIATION 
}

I tried to get the JSON object like this in service;

getPrices():Observable<Sports[]> {
    return this.http.get<Sports[]>(sportsPath); //sportsPath is the path in our server that goes to the JSON I have given
  }

And in the ts file, I try to subscribe the object with this function;

sportsObject : Sports[] //THIS IS THE MEMBER THAT SHOULD BE FILLED WITH THE JSON OBJECT GIVEN

ngOnInit(){
    this.SportsService.getPrices().subscribe(data=>{
      this.sportsObject = data;
      console.log("Our member contains: " + this.sportsObject);
    })    
}

But, as you guys might guess, this console log gives me this; Our member contains: [object Object]. So how can I properly get and subscribe to this object?

Also, in my HTML file, it gives "Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays." error when I run this ngFor code;

<div *ngFor="let member of sportsObject">
       <p>The link is:</p>
       <p>member.link</p>
</div>

So also, how will I correctly do an ngFor?

Baris
  • 121
  • 1
  • 3
  • 10

1 Answers1

0

I believe you subscribe correct. the logging is an issue. try comma instead of plus

console.log("Our member contains: ", this.sportsObject);
IAfanasov
  • 4,775
  • 3
  • 27
  • 42
  • It worked perfectly dude! Thanks a alot, I couldnt imagine my problem was this much easy. Also can you quickly check out the question again, I added an HTML problem, too. I would be very happy if you can also answer that. – Baris Aug 20 '20 at 12:01
  • 1
    the answer is here: https://stackoverflow.com/a/41396558/390161 basically, you try to iterate the object the same way as an array. it should be a bit different – IAfanasov Aug 20 '20 at 12:06