web-dev-qa-db-fra.com

Manuscrit, Angular 2 - Parse Json à objecter en http

J'ai un fichier location.json, contenant la chaîne json de la forme:

{
  "locations": [
    {
      "id": 1,
      "places": [
        {
          "id": 1,
          "city": "A",
          "state": "AB"
        }
      ]
    }
}

J'ai créé des classes de la forme:

export class Location{
       constructor(public id: number,
        public places: Place[],
     }

export class Place {
        constructor(
        public id: number, 
        public city: string,
        public state: string
}

Comment analyser la chaîne json en object? J'ai fait quelque chose comme ça:

...
export class DashboardComponent {

  locations: Locations[];

  constructor(private locationService:LocationService) {
    this.getLocations() 
  }

  getLocations(){
      this.locationService.get('assets/location.json')
      .subscribe(res => this.location = res);
  }
jsonangularparsingtypescriptangular2-services
4
Kenadet

Selon le résultat pour le sous-opérateur, il peut être:

.map(res => this.location = res.json().locations);

Ou:

.subscribe(res => this.location = JSON.parse(res).locations);

Mais gardez à l'esprit que cela n'instanciera pas les instances de vos classes, il affectera uniquement les valeurs sous forme d'objet js normal qui correspondent aux éléments suivants:

interface Location {
    id: number;
    places: Place[];
}

interface Place {
    id: number;
    city: string;
    state: string;
}

Si vous voulez des instances des classes, vous devrez faire quelque chose comme:

JSON.parse(res)
    .locations.map(location => new Location(location.id, 
        location.places.map(place => new Place(place.id, place.city, place.state)))
6
Nitzan Tomer

généralement, vous mappez la réponse avec res => res.json() quelque part dans la méthode de service, mais json doit avoir un format valide, sinon il ne sera pas analysé.

Remarque, cette réponse est un objet et vous ne pouvez pas l'analyser, mais seulement le corps de la réponse.

  return this.http.get(url,options).map((response) => this.parseResponse(response))
        .catch((err) => this.handleError(err));

  private handleError(error: any) {
    let body = error.json();

    return Observable.throw(body);
  }

  private parseResponse(response: Response) {
    return response.json();
  }
0
Roman C