Как разобрать JSON в GET HTTP в Ionic Angular?

Question

Я пытаюсь выполнить следующие задачи в приложении Ionic / Cordova.Мне нужно выполнить метод запроса GET, чтобы загрузить это:

{"fantaAllenatori":[{"Posizione":1,"FantaAllenatore":"Player1","Punti":"6","V":"1","P":"0","S":"0"},{"Posizione":2,"FantaAllenatore":"Player2","Punti":"5","V":"1","P":"0","S":"0"}]}

Поэтому я сопоставил объект следующим образом (rankRows.ts):

export interface RankRow {
   posizione: number;
   FantaAllenatore: String;
   Punti: String;
   V: String;
   P: String;
   S: String;
}

И это fanta fantacalcio.service.ts, модуль, который обрабатывает соединения с сервером ResAPI:

   import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { EnvService } from './env.service';
import { AuthenticationService } from './authentication.service';
import { map } from 'rxjs/operators';
import { RankRow } from '../models/rankRow';

export class RankRowsResponse {
  data: RankRow[];
}

@Injectable({
  providedIn: 'root'
})
export class FantacalcioService {

  constructor(
    private http: HttpClient,
    private env: EnvService,
    private authenticationService : AuthenticationService){}


    getMatchDay(){
      return this.http.get(this.env.API_URL + 'matchday.php').toPromise()
      .then(respone =>{
        console.log(respone);
      })
    .catch(error =>{
      console.log(error);
    })
    }

    getRank(){
      var json;
      let headers = { headers: this.authenticationService.getHeadersToken(), withCredentials: true};
      return this.http.get<RankRowsResponse>(this.env.API_URL + 'classifica.json', headers).pipe(
        map(prsp => {prsp.data;
        console.log(prsp.data.length)}));
   }
}

Где я ошибаюсь?Я не в состоянии получить представление о массиве, поэтому я не могу получить данные.

Answer 1

Вы не return из вашей map функции:

return this.http.get<RankRowsResponse>(this.env.API_URL + 'classifica.json', headers)
    .pipe(
        map(prsp => {
        console.log(prsp.data.length);
        return prsp;
     }));

Или просто используйте subscribe метод:

return this.http.get<RankRowsResponse>(this.env.API_URL + 'classifica.json', headers)
    .subscribe( res => 
        return res;
     }));

Метод pipe позволяет связатьнаблюдаемые операторы, и subscribe должен активировать наблюдаемые и прослушивать излучаемые значения.

Answer 2

Попробуйте:

для модели:

export class RankRow {
    posizione: number;
    FantaAllenatore: String;
    Punti: String;
    V: String;
    P: String;
    S: String;
}

В компоненте:

datalist:RankRow ;

this.service.GetDataList().subscribe(result => {this.datalist= result;});