CODEWITHSUNDEEP
angulartypescriptpagination
PrabodhanaJ
PrabodhanaJ

Reputation: 303

extracting data from responses in anguar

I was trying to get a list of items from the server. then I add pagination to the system and the response from the server change like this,

{
    "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"
    }
}

can someone help me to extract items, meta and links from this response in angular. previously i used below code to extract data from the request. but at that time the response was quait differant.

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

previous response was like

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

Upvotes: 1

Views: 394

Answers (2)

Jobelle
Jobelle

Reputation: 2834

First update your interface

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 }

Then use the BooksResponse as the return type of your api

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

Upvotes: 1

Tharindu Sathischandra
Tharindu Sathischandra

Reputation: 1994

You may try like this. First create an interface that defines the response.


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
}

Then you can just grab the books from that response like,

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

Upvotes: 1

Related Questions