Angular2 JSON返回

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>   

Answer 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();
    }
}