从角度响应中提取数据

Question

我试图从服务器获取项目列表。然后我将分页添加到系统中，服务器的响应会像这样改变，

{
    "items": [
        {
            "book_ref_no": 12,
            "book_name": "ice and fire",
            "author": "jrr martine",
            "category": "HISTORY",
            "availability": false
        },
        {
            "book_ref_no": 14,
            "book_name": "word war 2",
            "author": "Not me",
            "category": "NOVEL",
            "availability": false
        }
    ],
    "meta": {
        "totalItems": 4,
        "itemCount": 2,
        "itemsPerPage": "2",
        "totalPages": 2,
        "currentPage": 1
    },
    "links": {
        "first": "http://localhost:3000/books?limit=2",
        "previous": "",
        "next": "http://localhost:3000/books?page=2&limit=2",
        "last": "http://localhost:3000/books?page=2&limit=2"
    }
}

谁能帮我从这个响应中提取项目、元和链接。以前我使用下面的代码从请求中提取数据。但当时的反应是完全不同的。

getBooks(){
      this.http.get<Book[]>('http://localhost:3000/books')
      .subscribe(books => {
          this.books = books;
          this.booksUpdated.next(books);
        },
        );
      }

之前的回答是这样的

[
 { book 1...},
 { book 2...},
 ...
]

Answer 1

你可以这样试试。 首先创建一个定义响应的接口。

interface Book{
  book_ref_no: number,
  book_name: string,
  author: string,
  category: string, // or Enum
  availability: boolean
}

interface Meta{
  totalItems: number,
  itemCount: number,
  itemsPerPage: string,
  totalPages: number,
  currentPage: number
}

interface Links{
  first: string,
  previous: string,
  next: string,
  last: string
}

interface PagedResponse{
  items: Book[],
  meta: Meta,
  links: Links
}

然后您可以从该响应中获取书籍，例如，

getBooks(){
    this.http.get<PagedResponse>('http://localhost:3000/books')
      .subscribe(pagedResponse => {
          this.books = pagedResponse.items;
        },
      );
  }

Answer 2

首先更新你的界面

interface Book{ 
book_ref_no: number, book_name: string, 
author: string, 
category: string,
 availability: boolean }

 interface Meta{ 
totalItems: number, 
itemCount: number,
 itemsPerPage: string, 
totalPages: number, 
currentPage: number }

 interface Links{ first: string,
 previous: string, 
next: string, 
last: string } 

interface BooksResponse{ 
items: Book[], 
meta: Meta, 
links: Links }

然后使用 BooksResponse 作为你的 api 的返回类型

getBooks(){ 
        this.http.get<BooksResponse>('http://localhost:3000/books')
         .subscribe(data => { 
 this.books = data.items;
    
     this.booksUpdated.next(this.books);
    
         }, ); 
        }