Захват JSONAPI включен в Angular Observable - PullRequest
Новая
       84

Захват JSONAPI включен в Angular Observable

1 голос
/ 14 июля 2020

Я пытаюсь узнать, как получить контент из Drupal 8 в свое приложение Angular 7 с помощью jsonapi, начиная с книги Престона Со «Разъединенный Drupal на практике». Он не показывает, как получить ресурсы из отношений и включить их.

jsonapi spe c предлагает функцию включения, с помощью которой я могу получить связанные ресурсы из узла без необходимости делать отдельный вызов.

Использование http://localhost/jsonapi/node/article/MYUUID?include=field_image представляет красивый json объект в этом общем формате. 

jsonapi
data
--attributes
--relationships
included

Я пытаюсь получить включенную часть, но моя ArticleService получает только содержимое данных, и я хочу, чтобы они были включены.

My article.ts 

export class Article {
  attributes: object;
  relationships: object;
  included: object;
}

My article.service.ts 

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable, of } from 'rxjs';
import { catchError, map, mergeMap } from 'rxjs/operators';
import { Article } from '../articles/article';
import { Image } from '../articles/image';

const httpOptions = {
  headers: new HttpHeaders({ 'Content-Type': 'application/json'})
}

@Injectable({
  providedIn: 'root'
})
export class ArticleService {
  private articlesUrl = 'http://localhost/jsonapi/node/article';

  constructor(private http: HttpClient) {}
  getArticle(id: string): Observable<Article>
  {
    if (id) {
      return this.http.get<Article>(this.articlesUrl + '/' + id + '?include=field_image', httpOptions)
        .pipe(
          map(res => res['data'])
         )
        .pipe(
          catchError(this.handleError([]))
    );
    } 
  }
 private handleError<T> (result?: T) {
    return (error: any): Observable<T> => {
      console.error(error);
      return of(result as T);
    }
  }
}

Итак Моя первая функция карты извлекает объект данных из тела. Я мог бы увеличить это. Я попытался установить map(res => res['body']), затем map(res => res['']), который не возвращает никаких объектов. Читая rxjs / operator, я вижу некоторые операторы, такие как mergeMap, concatMap, которые не работают, потому что я не понимаю, как получить содержимое всего тела ответа. Мои поиски не дали ничего, что могло бы помочь, поэтому я ищу указания о том, как получить весь текст ответа.

1 Ответ

1 голос
/ 14 июля 2020

article.service.ts 

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable, of } from 'rxjs';
import { catchError, map, mergeMap } from 'rxjs/operators';
import { Article } from '../articles/article';
import { Image } from '../articles/image';

const httpOptions = {
  headers: new HttpHeaders({ 'Content-Type': 'application/json'})
}

@Injectable({
  providedIn: 'root'
})
export class ArticleService {
  private articlesUrl = 'http://localhost/jsonapi/node/article';

  constructor(private http: HttpClient) {}
  getArticle(id: string): Observable<Article>
  {
    if (id) {
      return this.http.get<Article>(this.articlesUrl + '/' + id + '?include=field_image', httpOptions);
    } 
  }
 private handleError<T> (result?: T) {
    return (error: any): Observable<T> => {
      console.error(error);
      return of(result as T);
    }
  }
}

component.ts 

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { ArticleService } from './article.service'; // import ArticleService service from article.service.ts file

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
  // inject ArticleService to the component
  constructor(private articleService : ArticleService ) {
    this.getArticle(); call getArticle function onInit
  }
  

  getArticle() {
   const id = 12;  // getting article id 12 details
   // subscribe to getArticle service method will call HTTP request and return response
   this.articleService.getArticle(id).subscribe((response)=> {
      // on successful request this block get called
      console.log('response body');
      console.log(response);
      console.log('response actual data');
      console.log(response.body);
    }, (error)=> {
      // on error this block get called like 404, 500 http status 
  })
  }
}
...