3
votes

Angular 7 - Problème HttpClient avec .json ()

J'essaye de transformer ma réponse get de json en tableau^:

export class PostsService {
  apiRoot: string = "https://public-api.wordpress.com/rest/v1.1/sites/en.blog.wordpress.com/posts/?number=3";
  results: PostsItem[];
  loading: boolean;

  constructor(private http: HttpClient) {
    this.results = [];
    this.loading = false;
  }

  getPosts(term: string): Observable<PostsItem[]> {
    let apiURL = `${this.apiRoot}`;
    return this.http.get(apiURL)
    .map( res => {
      let results = res.json().results.map( item => {
        return new PostsItem(
          item.ID,
          item.post_thumbnail,
          item.date,
          item.title,
          item.url,
          item.author,
          item.avatar
        );
      })
      return results;
    });
  }
}

Et je sais que lorsque j'utilise HttpClient au lieu de Http , il n'est pas nécessaire d'utiliser .json () mais j'ai du mal avec la syntaxe.

angular httpclient angular7 observable

2 commentaires

Qu'avez-vous dans le modèle PostsItem?

classe d'exportation PostsItem {constructeur (ID public: nombre, public post_thumbnail: string, public date: string, public title: string, public URL: string, public author: string, public avatar: string) {}}

3 Réponses :

0
votes

Essayez-le avec cette syntaxe:

private getData(): Observable<Data> {
   this.http.get<DataType>(url).pipe(
     map(res => this.mapResponse(res))
   );
}

La partie importante est que vous utilisez la carte dans un tube. Et comme vous l'avez déjà mentionné, res.json n'est pas nécessaire depuis l'introduction de HttpClientModule

2 commentaires

Pourriez-vous essayer de l'implémenter dans mon code? Je suis relativement nouveau sur Angular

Vous pouvez vérifier mon implémentation ici pour votre code codesandbox.io/s/78w2vl0p0 . Des explications à cela sont dans ma réponse.

2
votes

Vous devriez examiner la propriété posts de la réponse de l'API, quelque chose comme ceci (simplifié en utilisant fonctions de flèche ):

getPosts(): Observable<PostsItem[]> {
return this.http
  .get(this.apiRoot)
  .map(res =>
    res.posts.map(
      item =>
        new PostsItem(
          item.ID,
          item.post_thumbnail,
          item.date,
          item.title,
          item.url,
          item.author,
          item.avatar
        )
    )
  );
}

Les résultats sont maintenant un tableau de PostItem

J'ai créé une démo fonctionnelle, vous pouvez la vérifier ici -> https://codesandbox.io/s/78w2vl0p0

0 commentaires

0
votes

import { map} from 'rxjs/operators';
import {HttpClient, HttpResponse} from '@angular/common/http'

export class PostsService {
  apiRoot: string = "https://public-api.wordpress.com/rest/v1.1/sites/en.blog.wordpress.com/posts/?number=3";
  results: PostsItem[];
  loading: boolean;

  constructor(private http: HttpClient) {
    this.results = [];
    this.loading = false;
  }

  getPosts(term: string): Observable<PostsItem[]> {
    let apiURL = `${this.apiRoot}`;
    return this.http.get(apiURL).pipe(
         map(this.extractData)
    )
  }

  extractData(res: HttpResponse<any>) {
    const results = res['results'];
    results.map(item => {
      return new PostsItem(
        item.ID,
        item.post_thumbnail,
        item.date,
        item.title,
        item.url,
        item.author,
        item.avatar
      );
    });
    return results;
  }
}

0 commentaires