Angular 7 Get Data From API

Question

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

Sachin Gupta · Accepted Answer · 2019-08-21 03:23:19Z

2

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

answered Aug 21, 2019 at 3:23

Sachin Gupta

5,3493 gold badges19 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

swapy Over a year ago

Thank you dude.. it work.. I got the value... But It come out error ERROR TypeError: "_this.dataSource.data.map is not a function"

Sachin Gupta Over a year ago

The error came on this code ? Or some other place ?

swapy Over a year ago

i've figured out the error. it come from other place. Thanks

Indrakumara · Accepted Answer · 2019-08-21 03:17:16Z

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;
}

Adrian Brand · Accepted Answer · 2019-08-21 02:35:14Z

0

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.

answered Aug 21, 2019 at 2:35

Adrian Brand

21.8k4 gold badges46 silver badges67 bronze badges

2 Comments

swapy Over a year ago

Thanks dude for your answer.. But how to get data "noPage" and "totalPage"? when i console.log(this.dataSource) it only display data from "List": []

Adrian Brand Over a year ago

Don't pipe anything, just return return this.http.get<AgentDetails>(urls) and you will get the whole response.

dprophecyguy · Accepted Answer · 2019-08-21 02:53:52Z

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.

Collectives™ on Stack Overflow

Angular 7 Get Data From API

4 Answers 4

3 Comments

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related