首页 > 解决方案 > 从 API 获取特定数据(角度)

问题描述

介绍

我正在尝试将我的网站连接到 GitHub API 以获取过去 30 天中星号最多的存储库,然后它发送一个包含 100 个存储库的 json 文件的响应,这部分在我的应用程序中没问题,它连接并正确接收数据.

问题

问题是它接收到带有一堆不需要的字段的 json 文件,我只需要 5-6 个字段,它包含近 25 个,所以我想将所有这些字段映射到我的 Typescript 类。我收到此错误消息

Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

代码

打字稿

getRepos(): Observable<Reop[]> {
    return this.http.get<Repo[]>(baseURL).pipe(catchError(this.processHTTPMsgService.handleError));
}

描述
服务中的该函数,当用户需要从 api 请求新页面时将调用该函数,“baseURL”是新页面的 URL,然后将其返回给调用者,如果发生则处理后返回错误.

this.repoService.getRepos().subscribe((repos) => (this.repos = repos), errmess => this.errMess = <any>errmess);

描述
这将调用服务并请求响应,然后尝试将其映射到类或在收到错误时显示消息。Ps:这是我认为的问题所在,我无法将响应映射到我的对象。

export class Repo {
    name: string;
    username: string;
    avatar:string;
    description: string;
    stars: number;
    issues: number;
}

描述
这是我的项目中所需数据的类,具有所有需要的值。**响应的基本布局**

{
  total_count: number;
  incomplete_results: boolean;
  items: {
      id: number;
      node_id: string;
      name: string;
      full_name: string;
      private: boolean;
      owner: {
        login: string;
        id: number;
        node_id: string;
        avatar_url: string;
       };
      html_url: string;
      description: string;
      fork: boolean;
      url: string;
      ...
      ...
      ...
      watchers: number;
      default_branch: string;
      score: number;
    }
}

描述
这是 api 发送的,一个由 3 个对象组成的数组,其中“items”对象包含我只需要 5-6 个字段的数据数组。

需要/期望什么

我想过滤响应以获取我需要的值,仅此而已。

标签: htmljsonangulartypescriptapi

解决方案


推荐阅读