CODEWITHSUNDEEP
angulartypescript
swapy
swapy

Reputation: 126

Angular 7 Get Data From API

I need to get data from API using GET method. Actually, I need "noPage", "totalPage" , "List":[]

This is the response from API

{
    "status": {
        "code": 0,
        "message": "Success."
    },
    "noPage": 5,
    "totalPage": 9,
    "List": [
        {
            "_id": "CFB2D5FFDFDADDB954404BF1B9D59844",
            "createdDate": "2019-06-25T08:42:27.799+0000",
            "createdBy": "Josh",
            "enable": "true",
            "remarks": null,
            "Id": "0044",
            "Name": "Trisya"
]

}

Then I'm using this method to get data

Service

getService(): Observable<any>  {
    const urls: string = `http://192.168.0.101:9080/project/api/listall/${Id}`

    return this.http.get<AgentDetails>(urls).pipe(map(res => res['List']));

  }

I only success get data in "List": [] only not "noPage"and "totalPage"

How I need to do to get "noPage"and "totalPage"

Hope you all can help

Thanks in advance

Upvotes: 0

Views: 3073

Answers (4)

Sachin Gupta
Sachin Gupta

Reputation: 5311

This is because you are taking out only list from the object in the map function: 

map(res => res['List']);

the res['List'] will return only List. If you want to return more information, you can use:

map(res => {
    return {
      List: res['List'],
      noPage: res['noPage'],
      totalPage: res['totalPage']
    };
}

checkout the documentation for map for more information

Upvotes: 2

Indrakumara
Indrakumara

Reputation: 1645

try below example,

https://stackblitz.com/edit/angular-dljtkv

Service Class

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { HttpClient, HttpErrorResponse, HttpHeaders } from '@angular/common/http';

import { AgentDetails } from './agent-details';

@Injectable()
export class AgentService {

  constructor( public http: HttpClient,) { }

  getService(): Observable<AgentDetails>  {
     const urls: string = `http://192.168.0.101:9080/project/api/listall/${Id}`

    // const urls = "/assets/agent-details.json";

    return this.http.get<AgentDetails>(urls);

  }

}

Component Class

import { Component } from '@angular/core';

import {AgentService} from './agent.service';
import { AgentDetails } from './agent-details';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent   {
  name = 'Angular';

  agentDetails:AgentDetails;

  constructor(public agentService: AgentService){
      this.getAgentDetails();
  }


  getAgentDetails(){
    this.agentService.getService().subscribe(data=>{
      this.agentDetails = data;
      console.log(JSON.stringify(this.agentDetails));
    })
  }


}

Model classes

import { Status } from './status';
import { Agent } from './agent';
export class AgentDetails {
  status: Status;
  noPage:number;
  totalPage:number;
  List: Agent[];

}

export class Status {

  code:number;
  message:string;
}

export class Agent {


  _id: string;
  createdDate: Date;
  createdBy: string;
  enable: boolean;
  remarks: string;
  Id: number;
  Name: string;
}

Upvotes: 1

dprophecyguy
dprophecyguy

Reputation: 273

What you need to do is to define an Interface for the response you are getting.

For example define one interface like this 

interface UserAPIResponse {
  status: Status;
  noPage: number;
  totalPage: number;
  List: UserList[];
}

interface UserList {
  _id: string;
  createdDate: string;
  createdBy: string;
  enable: string;
  remarks?: any;
  Id: string;
  Name: string;
}

interface Status {
  code: number;
  message: string;
}

Now you can pick the desired attributes out of your response 

getService(): Observable<any>  {
    const urls: string = `http://192.168.0.101:9080/project/api/listall/${Id}`

    return this.http.get<AgentDetails>(urls).pipe(
       map(({noPage, totalPage, List} : UserAPIResponse) => {noPage, totalPage, List));

}

Now as a response you will get an Object with only these 3 attributes.

If you want to understand a bit more read about destructuring.

Upvotes: 0

Adrian Brand
Adrian Brand

Reputation: 21638

map(res => res['List'])

this runs the function

res => res['List']

on the results, this is stating you want to take the response and return just the property list. So your results are exactly what that map function does.

Get rid of the map to get the entire response.

Upvotes: 0

Related Questions