Angular2 JSON return

Question

I'm new to angular2. I have question about get data from two API's. From first get ID's and from another get data by ID and print it on frontend.

I can't understand how to iterate JSON data from getPlayers() API

Iterating is working, but it doesn't print any data.

My service looks like this:

import {Injectable} from '@angular/core';
import { Http } from "@angular/http";
import "rxjs/Rx";
import {Observable} from 'rxjs/Rx';



@Injectable()
export class PlayersService {
    roster:any[];
    players:any[];

    constructor(private http: Http){
    }


   getPlayers(roster) {
    let url = "http://php.esports.cz/phone_app_roman_api/api.php/hrac?filter=id,eq,";
    return Observable.combineLatest(
      ...roster["soupiska"].map(player => this.http.get(url+ player['id_hrac'])
        .map(res => res.json()))
    ).do(players=>console.log(JSON.stringify(players)));
  }

  getRoster() {
    let url = "http://php.esports.cz/phone_app_roman_api/api.php/soupiska?filter[]=kategorie,eq,MUZ&filter[]=sezona,eq,2017&order=id_polozka&page=1,10"
    return this.http.get(url)
      .map(res => res.json())
  }


}

and my component like this:

import {Component} from "@angular/core";
import {Location} from "@angular/common";
import {Page} from "../page";
import {OnInit} from '@angular/core';

import{PlayersService} from '../../services/players.service';

@Component({
    selector: 'roster-page',
    templateUrl: 'pages/roster/roster.page.html',
    styleUrls:  ['pages/roster/roster.page.css'],
    providers: [PlayersService]
})
export class RosterPage extends Page implements OnInit {

    roster:any[];
    players:any[];



    constructor(private location: Location, private playersService: PlayersService) {
        super(location);
    }

     ngOnInit() {
        this.playersService.getRoster()
        .do(roster=>this.roster=roster)
        .switchMap(roster=>this.playersService.getPlayers(roster))
        .do(players=>this.players=players)
        .subscribe();

    }



}

Template looks like this:

<StackLayout class="players">
    <StackLayout *ngFor="let player of players" orientation="horizontal" [nsRouterLink]="['/player']" pageTransition="slideTop" class="player-box">
        <Label text="{{player.hrac.jmeno}}" class="player-bane"></Label>   
    </StackLayout>
</StackLayout>

what is your problem ?

n00dl3
– n00dl3

2017-03-29 10:34:42 +00:00
Commented Mar 29, 2017 at 10:34 — n00dl3
– n00dl3, Commented Mar 29, 2017 at 10:34
this.players is empty.

Roman Šimr
– Roman Šimr

2017-03-29 10:35:15 +00:00
Commented Mar 29, 2017 at 10:35 — Roman Šimr
– Roman Šimr, Commented Mar 29, 2017 at 10:35

n00dl3 · Accepted Answer · 2017-03-29 11:09:52Z

1

There are many things that are wrong here:

First, http calls are asynchrnous, so you cannot access the value they compute until they have completed.
If there is no .subscribe(), no Observable will do anything.
You shouldn't rely on state when dealing with observables in services, that's counter-productive.

PlayerService:

export class PlayersService {
  constructor(private http: Http) {}

  getPlayers(roster) {
    let url = "http://php.esports.cz/phone_app_roman_api/api.php/hrac?filter=id,eq," ;
    return Observable.combineLatest(
      ...roster[0]["soupiska"].map(player => this.http.get(url+ player['id_hrac'])
        .map(res => res.json()))
    ).do(players=>console.log(players));
  }

  getRoster() {
    let url = "http://php.esports.cz/phone_app_roman_api/api.php/soupiska?filter[]=kategorie,eq,MUZ&filter[]=sezona,eq,2017&order=id_polozka&page=1,10"
    return this.http.get(url)
      .map(res => res.json())
  }

}

RosterPage:

export class RosterPage extends Page implements OnInit 
{
    roster:any[];
    players:any[];

    constructor(private location: Location, private playersService: PlayersService) {
        super(location);
    }

    ngOnInit() {
        this.playersService.getRoster()
        .do(roster=>this.roster=roster)
        .switchMap(roster=>this.playersService.getPlayers(roster))
        .do(players=>this.players=players)
        .subscribe();
    }
}

answered Mar 29, 2017 at 11:09

n00dl3

21.6k8 gold badges70 silver badges77 bronze badges

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

6 Comments

Roman Šimr Over a year ago

Output with *ngFor="let player of players" is still empty :-O I cant understand why. It looks great

n00dl3 Over a year ago

You must edit your question, tell what is the expected behavior, and create a clear reproducible example, with template code, component, etc. No one can help you without these informations.

Roman Šimr Over a year ago

I added example to my post.

n00dl3 Over a year ago

that's because in your template, that should be player.hrac.jmeno not player['jmeno'] (what a strange language)

n00dl3 Over a year ago

but If I were you I would strip all those useless arrays in the service...

|

Collectives™ on Stack Overflow

Angular2 JSON return

1 Answer 1

PlayerService:

RosterPage:

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

PlayerService:

RosterPage:

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related