Я пытаюсь получить пары ключ-значение из данных json через внешний API и отобразить их, используя angular и машинописный текст. Как мне этого добиться?

Question

Я хотел бы получить каждую пару значений ключа в объекте результатов из моего API для отображения на моем внешнем интерфейсе. ie (категория, тип, сложность, вопросы правильная_ответ). У меня правильно настроены служба и компоненты, и все, что мне нужно сделать, это получить json и отобразить каждую пару. Имя метода называется fetchQuestions, как показано ниже. Я смог успешно получить данные, просто вызвав их так же, как я делал fetchPeople, но формат json не тот, поэтому он не отображается. Затем я попробовал что-то еще, но это тоже не работает. Как я могу добиться отображения этого?

People.service

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

 @Injectable({
 providedIn: 'root'
 })
 export class PeopleService {

 constructor(private http: HttpClient) { }


//this works like a charm as it is just a simple array

fetchPeople(): Observable <Object> {
return this.http.get('/assets/data/people.json')
}




// this doesn't work as the json from the api below is in a different 
  // json format. Plus I need to return all value pairs

fetchQuestions(): Observable <Object> {
return this.http.get('https://opentdb.com/api.php? 
 amount=10&difficulty=hard&type=boolean').map(res => 
res.json().results).subscribe(data => {
console.log(data););
    }
  }

API https://opentdb.com/api.php?amount=10&difficulty=hard&type=boolean

   {
   "response_code": 0,
   "results": [
   {
   "category": "Vehicles",
   "type": "boolean",
   "difficulty": "hard",
   "question": "In 1993 Swedish car manufacturer Saab experimented 
   with replacing the steering wheel with a joystick in a Saab 9000.",
   "correct_answer": "True",
   "incorrect_answers": [
    "False"
   ]
   },
   {
  "category": "History",
  "type": "boolean",
  "difficulty": "hard",
  "question": "Japan was part of the Allied Powers during World War 
  I.",
  "correct_answer": "True",
  "incorrect_answers": [
    "False"
  ]
  },
  {
  "category": "History",
  "type": "boolean",
  "difficulty": "hard",
  "question": "The Kingdom of Prussia briefly held land in Estonia.",
  "correct_answer": "False",
  "incorrect_answers": [
    "True"
  ]
  },
  {
  "category": "Science: Mathematics",
  "type": "boolean",
  "difficulty": "hard",
  "question": "The binary number "101001101" is equivalent 
  to the Decimal number "334"",
  "correct_answer": "False",
  "incorrect_answers": [
    "True"
  ]
  },
  {
  "category": "Entertainment: Video Games",
  "type": "boolean",
  "difficulty": "hard",
  "question": "TF2: Sentry rocket damage falloff is calculated based 
 on the distance between the sentry and the enemy, not the engineer 
  and the enemy",
  "correct_answer": "False",
  "incorrect_answers": [
    "True"
  ]
 },
  {
  "category": "Entertainment: Video Games",
  "type": "boolean",
  "difficulty": "hard",
  "question": "The names of Roxas's Keyblades in Kingdom Hearts 
  are "Oathkeeper" and "Oblivion".",
  "correct_answer": "True",
  "incorrect_answers": [
    "False"
  ]
},
{
  "category": "Entertainment: Music",
  "type": "boolean",
  "difficulty": "hard",
  "question": "The band STRFKR was also briefly known as Pyramiddd.",
  "correct_answer": "True",
  "incorrect_answers": [
    "False"
  ]
},
{
  "category": "Entertainment: Books",
  "type": "boolean",
  "difficulty": "hard",
  "question": "Harry Potter was born on July 31st, 1980.",
  "correct_answer": "True",
  "incorrect_answers": [
    "False"
  ]
},
{
  "category": "Entertainment: Japanese Anime & Manga",
  "type": "boolean",
  "difficulty": "hard",
  "question": "Druid is a mage class in "Log Horizon".",
  "correct_answer": "False",
  "incorrect_answers": [
    "True"
  ]
},
{
  "category": "Geography",
  "type": "boolean",
  "difficulty": "hard",
  "question": "The two largest ethnic groups of Belgium are Flemish and Walloon. ",
  "correct_answer": "True",
  "incorrect_answers": [
    "False"
     ]
   }
 ]
}

People.page.ts

 import { Component, OnInit } from '@angular/core';
 import { PeopleService } from './../../providers/people.service'
 @Component({
 selector: 'app-people',
 templateUrl: './people.page.html',
 styleUrls: ['./people.page.scss'],
 })
 export class PeoplePage implements OnInit {

 people$;
 results$;
 constructor(private peopleService:PeopleService) { }

 fetchPeople(){
 this.people$ = this.peopleService.fetchPeople();
 }
 fetchQuestions(){
  this.results$ = this.peopleService.fetchQuestions()
 }




  ngOnInit() {
  }

 }

People.page. html

   <ion-toolbar>
   <ion-title>people</ion-title>
   </ion-toolbar>
   </ion-header>
   <ion-button (click) ="fetchPeople()"  color="primary">Primary</ion- 
   button>

   <ion-list>
   <ion-item *ngFor="let person of people$ | async">{{person.name}}. 
   </ion-item>
   </ion-list>
   <ion-button (click) ="fetchQuestions()"  
   color="primary">Secondary</ion-button>
   <ion-list>
            <ion-item *ngFor="let result of results$ | async">. 
             {{result.category}}</ion-item>
             <ion-item *ngFor="let result of results$ | async"> 
            {{result.questions}}</ion-item>
           <ion-item *ngFor="let result of results$ | async"> 
           {{result.difficulty}}</ion-item>
           <ion-item *ngFor="let result of results$ | async"> 
            {{result.correct_answer}}</ion-item>
   </ion-list>
  <ion-content>
 <ion-button color="primary">Primary</ion-button>
 </ion-content>

Answer 1

HTTP GET - холодная наблюдаемая. Таким образом, каждый async будет выдавать индивидуальный запрос. Кроме того, вы на самом деле не возвращаете наблюдаемое из функции fetchQuestions(). Подписка должна быть удалена.

Вы также можете использовать Angular HttpParams для установки параметров запроса и выполнения действий Angular.

Попробуйте следующий

Сервис

import { HttpClient, HttpParams } from '@angular/common/http';

fetchQuestions(): Observable<any> {
  const params = new HttpParams()
    .set('amount', '10')
    .set('difficulty', 'hard')
    .set('type', 'boolean');  
  return this.http.get('https://opentdb.com/api.php', { params: params })
    .pipe(map(res => res.results));
}

Шаблон

<ng-container *ngFor="let result of results$ | async">
  <ion-list>
    <ion-item>{{result.category}}</ion-item>
    <ion-item>{{result.question}}</ion-item>
    <ion-item>{{result.difficulty}}</ion-item>
    <ion-item>{{result.correct_answer}}</ion-item>
  </ion-list>
</ng-container>

Я также заметил небольшой тип. result.questions на самом деле должно быть result.question.

Подробнее о горячих и холодных наблюдаемых: https://blog.thoughtram.io/angular/2016/06/16/cold-vs-hot-observables.html

Рабочий пример: Stackblitz