在Angular 6中显示来自api的数据的问题

唯一

在我的应用程序中,我正在调用iTunes api,当我记录响应时,响应将与[object object]一起返回。我知道这一定与api的数组结构有关。我将服务注入到组件中,如下所示:顺便说一句,我有API的proxy.conf.json文件。

服务

import { Injectable } from '@angular/core';
import { HttpClient, HttpEventType, HttpHeaders, HttpRequest, HttpResponse, HttpErrorResponse } from '@angular/common/http';
import { Observable, of, throwError } from 'rxjs';
import { catchError, retry } from 'rxjs/operators';


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

  api: string = 'api';

  constructor(
    private http: HttpClient,
  ) { }

  getAll(): Observable<any> {
    return this.http.get<any>(this.api)
      .pipe(
        catchError(this.handleError)
      );
  }
  private handleError(error: HttpErrorResponse) {
    if (error.error instanceof ErrorEvent) {
      console.log(error.error.message)

    } else {
      console.log(error.status)
    }
    return throwError(
      console.log('Something is wrong!'));
  };
}

component.ts

import { Component, OnInit } from '@angular/core';
import { HttpClient, HttpEventType, HttpHeaders, HttpRequest, HttpResponse } from '@angular/common/http';
import { ApiService } from '../../../services/api.service';


@Component({
  selector: 'app-content',
  templateUrl: './content.component.html',
  styleUrls: ['./content.component.scss']
})
export class ContentComponent implements OnInit {

  public results = [];

  constructor(private service: ApiService) { }
  private http: HttpClient
  ngOnInit() {
    this.getApi();
  }

  private getApi() {
    this.service.getAll().subscribe((results) => {
      console.log('JSON Response = ' + results);
    })
  }
}

api结构

{ 
   "resultCount":50,
   "results":[ 
      { 
         "wrapperType":"track",
         "kind":"song",
         "artistId":271256
      },
   ]
}

有任何想法吗?

萨耶塔兰(Sajeetharan)

格式正确,如果要以JSON格式查看,则需要使用JSON.stringify

 this.service.getAll().subscribe((results) => {
      console.log('JSON Response = ' + JSON.stringify(results));
      data = results.results;
})

如果您想使用ngFor遍历元素

 <li *ngFor="let dataObj of data">
      {{ dataObj.wrapperType}}
 </li>

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

在Angular中显示来自Rest Api的数据的正确方法

来自分类Dev

使用 ngFor 在 Angular 中显示来自 api 的其余数据

来自分类Dev

Angular 6 HttpClient 问题与映射来自 API 调用的响应

来自分类Dev

* ngFor不会在Angular 8中显示来自API的数据

来自分类Dev

如何在来自 Node API 的 Angular 中显示 quilljs 编辑器编写的数据

来自分类Dev

api显示列表中的Angular 8问题

来自分类Dev

使用Angular控制器显示来自API的JSON数据

来自分类Dev

Angular 6 - 无法处理来自 web api 的数据

来自分类Dev

在 HTML 页面中绑定来自组件的数据:Angular 6

来自分类Dev

在 Angular 6 服务中过滤 api 数据

来自分类Dev

来自 Web api 的数据未绑定到 Angular 中的视图

来自分类Dev

Angular 6 - 使用 *ngFor 显示数据库中的数据

来自分类Dev

Angular 9显示来自嵌套json的数据,该数据是从rest api获取的

来自分类Dev

Angular - 显示来自 TMDB api 的字段

来自分类Dev

如何使用angular 6在html中显示动态json数据?

来自分类Dev

如何从 Express 中的 API 获取要在 Angular 中显示的数据?

来自分类Dev

数据来自API,但不显示angular9 Abp框架

来自分类Dev

如何从Rest API获取数据并在angular js中显示

来自分类Dev

Angular 2 Pipes 显示数据的问题

来自分类Dev

从 Angular 6 中的 Api 获取和合并数据

来自分类Dev

如何从数据分页来自Angular中的json

来自分类Dev

Angular 2-显示来自Promise的异步对象数据

来自分类Dev

Angular ngrepeat 不显示来自对象数组的任何数据

来自分类Dev

Angular 页面未显示来自 Node 后端的 JSON 数据

来自分类Dev

Angular 6中Instascan库面临的问题

来自分类Dev

IONIC / Angular不显示来自外部API的JSON结果

来自分类Dev

无法从 API 数据 Angular 6 绑定

来自分类Dev

angular 6 如何从 YTS API 获取数据

来自分类Dev

在CSV文件Angular 6中显示图形

Related 相关文章

  1. 1

    在Angular中显示来自Rest Api的数据的正确方法

  2. 2

    使用 ngFor 在 Angular 中显示来自 api 的其余数据

  3. 3

    Angular 6 HttpClient 问题与映射来自 API 调用的响应

  4. 4

    * ngFor不会在Angular 8中显示来自API的数据

  5. 5

    如何在来自 Node API 的 Angular 中显示 quilljs 编辑器编写的数据

  6. 6

    api显示列表中的Angular 8问题

  7. 7

    使用Angular控制器显示来自API的JSON数据

  8. 8

    Angular 6 - 无法处理来自 web api 的数据

  9. 9

    在 HTML 页面中绑定来自组件的数据:Angular 6

  10. 10

    在 Angular 6 服务中过滤 api 数据

  11. 11

    来自 Web api 的数据未绑定到 Angular 中的视图

  12. 12

    Angular 6 - 使用 *ngFor 显示数据库中的数据

  13. 13

    Angular 9显示来自嵌套json的数据,该数据是从rest api获取的

  14. 14

    Angular - 显示来自 TMDB api 的字段

  15. 15

    如何使用angular 6在html中显示动态json数据?

  16. 16

    如何从 Express 中的 API 获取要在 Angular 中显示的数据?

  17. 17

    数据来自API,但不显示angular9 Abp框架

  18. 18

    如何从Rest API获取数据并在angular js中显示

  19. 19

    Angular 2 Pipes 显示数据的问题

  20. 20

    从 Angular 6 中的 Api 获取和合并数据

  21. 21

    如何从数据分页来自Angular中的json

  22. 22

    Angular 2-显示来自Promise的异步对象数据

  23. 23

    Angular ngrepeat 不显示来自对象数组的任何数据

  24. 24

    Angular 页面未显示来自 Node 后端的 JSON 数据

  25. 25

    Angular 6中Instascan库面临的问题

  26. 26

    IONIC / Angular不显示来自外部API的JSON结果

  27. 27

    无法从 API 数据 Angular 6 绑定

  28. 28

    angular 6 如何从 YTS API 获取数据

  29. 29

    在CSV文件Angular 6中显示图形

热门标签

归档