Angular наблюдаемая подписка JSON проблема разбора - PullRequest
Новая
       26

Angular наблюдаемая подписка JSON проблема разбора

0 голосов
/ 12 января 2020

У меня есть служба, выполняющая http.get на Drupal API и извлекающая данные JSON.

Компонент, использующий эти данные JSON, продолжает генерировать следующую ошибку: 

ERROR in src/app/form-test/form-test.component.ts(18,28): error TS2551: Property 'included' does not exist on type 'Question[]'. Did you mean 'includes'?

Из следующего кода: 

constructor(private dataService: QuizService) { }

ngOnInit() {
    this.dataService.fetch().subscribe(data => {
        this.jsondata = data.included[0].attributes.field_json;
        console.log(data, ': DATA');
    });
}

Я не понимаю, почему существует проблема с JSON и почему он пытается найти включенные, а не включенные в структуру JSON. Ниже приведен скриншот образца JSON:

enter image description here

Я подтвердил структуру данных JSON (что подтверждается изображение выше), также из консоли, записывающей данные JSON и то, что URL API активен в тот момент, когда приложение Ay angular пытается вызвать его.

Может кто-нибудь посоветовать, что является причиной этой ошибки и как я могу решить это?

ОБНОВЛЕНИЕ:

quiz.service.ts : 

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

export interface Question {
  // title: string;
  question: string;
  included: any[];
}

@Injectable({
  providedIn: 'root'
})

export class QuizService {
  // tslint:disable-next-line: max-line-length
  private quizURL: string = 'http://drupal-8-composer-drupal-test.com/jsonapi/node/quiz/31f020f7-34d9-4b9a-bd2b-0d567eb285dc/?include=field_questions&fields%5Bnode--quiz%5D=title,drupal_internal__nid,body&fields%5Bnode--question%5D=title,field_processed,body,field_options,field_json';

  constructor(private httpClient: HttpClient) { }

    fetch(): Observable<Question[]> {
      return this.httpClient.get<Question[]>( this.quizURL );
    }

}

1 Ответ

0 голосов
/ 28 января 2020

В сообщении об ошибке указано, что data имеет тип Question []. Это массив, а не объект. Компилятор Typescript пытается найти переменную included в массиве, и ее нет. Это выдает ошибку.

Ваша структура JSON содержит массив вопросов в поле included. Таким образом, тип, который возвращает fetch, должен быть таким, как { included: Question[] }: 

    fetch(): Observable<{ included: Question[] }> {
      return this.httpClient.get<{ included: Question[] }>( this.quizURL );
    }

Или вы можете обработать ответ только в сервисе и ответить на вопросы: 

fetch(): Observable<Question[]> {
  return this.httpClient.get(this.quizURL)
      .pipe(map((data: { included: Question[] }) => data.included));
}

.map Оператор получает весь объект ответа, извлекает только вопросы и возвращает их в виде массива.

...