从rest api中仅获取所需的数据

Question

我安装了一个 WordPress博客用于测试目的。我有一个 Angular 应用程序，它使用 WordPress Rest API。该应用程序调用一个获取类别的 api。json 响应包含我不会在我的应用程序中使用的数据。因此，我创建了一个模型，其中仅包含我需要的值，例如名称、slug 等。但是当我控制台响应时，它显示了整个数据。我该如何限制它？

代码：

模型

  export interface BlogCategoryModel {
    id: number;
    name: string;
    slug: string;
    parent: number;
  } 

服务

  getCategories(): Observable<BlogCategoryModel[]> {
    const url = 'https://blog.varanjith.com/wp-json/wp/v2/categories';
    return this.http.get<BlogCategoryModel[]>(url);
  }

成分

  ngOnInit() {
    this.blogService.getCategories().subscribe((x: BlogCategoryModel[]) => {
      console.log(x);
    });
  }

输出

为什么我在控制台中看到计数和描述？那里发生了什么事？我没有在 BlogCategoryModel 中包含计数和描述

Answer 1

仔细检查 typescript 和 HTTP 客户端的实际工作原理:)

如果您向 HTTP 客户端提供类型参数，它不会对响应执行任何操作，只会为其分配类型定义。这个类型定义实际上可以是任何东西。

您的工作是使用它并仅选择您真正需要的属性。

因此，在您的情况下，您需要首先使用管道映射您的响应map，然后映射类别数组并选择所需的属性。

getCategories(): Observable<BlogCategoryModel[]> {
    const url = 'https://blog.varanjith.com/wp-json/wp/v2/categories';
    return this.http
        .get<BlogCategoryModel[]>(url)
        .pipe(
            map(categories =>
                categories.map(({ id, name, slug, parent }) => ({ id, name, slug, parent }))
            )
        );
}

这是Stackblitz 的演示。