Как отобразить JSON, возвращаемый Angular Observable? - PullRequest
Новая
       11

Как отобразить JSON, возвращаемый Angular Observable?

0 голосов
/ 27 октября 2019

Я создаю клон Hacker News в Angular с помощью API Hacker News , и я пытаюсь отобразить комментарии, отвечающие на поток в шаблоне.

Мне трудно понять, что возвращает API (несмотря на .json в вызове API!), И не могу понять, как с ним работать.

В моем сервисе у меня есть следующее: 

 getCommentTree(commentId): Observable<any> {
        return this.http
          .get(`https://hacker-news.firebaseio.com/v0/item/${commentId}.json`);
    }

Компонент: 

childCommentDetails: any[] = [];

constructor(private hackerNewsService: HackerNewsService) { }

  ngOnInit() {
    this.getChildCommentDetail(this.id);
  }

  getChildCommentDetail(id: number) {
    this.hackerNewsService.getCommentTree(id).subscribe(
      (data) => {
        if (data !== null) {              
          this.childCommentDetails.push({ data });
        }
      },
      (err) => console.log(`error ${err}`),
      () => console.log('done')
    );
  }

Шаблон: 

<div *ngFor="let comment of childCommentDetails">
  <p [innerHTML]="comment.text"></p>
</div>

Когдаэто работает, я не вижу никакого вывода в моем шаблоне.

Однако, если я изменю шаблон на использование канала json: 

<div *ngFor="let comment of childCommentDetails">
  <li>{{ comment | json}} </li>
</div>

Отображается вывод в формате JSON. Поэтому я предполагаю, что API возвращает JSON, и затем я попытался преобразовать его обратно в объект, используя JSON.parse. Мой getChildCommentDetail изменился на: 

getChildCommentDetail(id: number) {
    this.hackerNewsService.getCommentTree(id).subscribe(
      (data) => {
        if (data !== null) {
          const obj = JSON.parse(data);          
          this.childCommentDetails.push({ obj });
        }
      },
      (err) => console.log(`error ${err}`),
      () => console.log('done')
    );
  }

Однако, когда я запускаю это, я вижу ошибку:

ОШИБКА SyntaxError: Неожиданный токен o в JSON в позиции 1

Что я делаю не так?

1 Ответ

1 голос
/ 27 октября 2019

Вы заключаете JSON, который получаете внутри объекта, поэтому ваш ответ API теперь фактически является вложенным объектом. Просто нажмите на API-ответ, который вы получите в массиве, и все готово: 

this.childCommentDetails.push(data);

Теперь все должно работать нормально. STACKBLITZ

...