I work on Angular 13 and I face an issue in that I can't retrieve pager data from the JSON.

The items array returned success but I can't return pager details.

So how to do it?

{
    "items": [
        {
            "id": 3,
            "itemNameER": "قلم",
            "itemNameEN": "pen",
            "description": "1"
        },
        {
            "id": 4,
            "itemNameER": "قلم",
            "itemNameEN": "pencil",
            "description": null
        },
        {
            "id": 5,
            "itemNameER": "قلم",
            "itemNameEN": "pen2",
            "description": null
        },
        {
            "id": 8,
            "itemNameER": "car",
            "itemNameEN": "car",
            "description": "1"
        },
        {
            "id": 9,
            "itemNameER": "mobile",
            "itemNameEN": "mobile",
            "description": "1"
        }
    ],
    "pager": {
        "numberOfPages": 2,
        "currentPage": 1,
        "totalRecords": 6
    }
} 

What I had try is:

items?:ItemsData[];
export interface ItemsData {
    id:number;
    itemNameER:string;
    itemNameEN:string;
    description:string;
}

retrieveAllItems(pageNumber: number = 0): void {
  this.erpservice.getAll(pageNumber)
    .subscribe(
      data => {
      this.items=data.items;
        console.log(data);
      },
      error => {
        console.log(error);
      });
}

How to extract pager data from JSON for the numberOfPages, currentPage and totalRecords?

Updated post

This is the information for the getAll return type. So how to get pager data details?

export interface DataWrapper {
    items: ItemsData[];
}

getAll(pageNumber: number): Observable<DataWrapper> {
  let params = new HttpParams();

  if (pageNumber)
    params = params.append('pageNumber', pageNumber);

  let httpOptions = {
      params: params
  };
  return this.http.get<DataWrapper>(baseUrl,httpOptions);
}

What I had try is:

pager: any;
this.pager = data.pager;

But I get an error:

Property 'pager' does not exist on type 'DataWrapper'.ts(2339)

<ul>
  <li *ngFor="let item of items | paginate: { currentPage:pager.currentPage }; let i = index">
    {{ pager.numberOfPages * (pager.currentPage - 1)   i }}
  </li>
</ul>

CodePudding user response：

The error message is quite clear. The DataWrapper interface doesn't have a pager property.

You need to:

1. Add the pager property into DataWrapper interface.

2. Define the IPager interface.

export interface DataWrapper {
  items: ItemsData[];
  pager: IPager;
}

export interface IPager {
  numberOfPages: number;
  currentPage: number;
  totalRecords: number;
}