How to map object using subscribe in angular

Question

I am trying to assgin values to a type in my component. My subscribe is returing this when I do console.log

this.srvice.getTasks(this.request).subscribe(heroes => console.log(heroes));



{
    "List": [
        {
            "id": 17,
            "pro": 1,
            "name": "Ram",
            "UserId": 2,
            "duedate": "2018-01-01T00:00:00",
            "status": 1,
            "active": false
        },
        {
            "id": 3,
            "pro": 1,
            "name": "My Name",
            "UserId": 1,
            "duedate": "2018-01-01T00:00:00",
            "status": 2,
            "active": false
        },
    ]
}

But when I am doing my assignment, it is not working.. I think It needs direct list to be supplied but my object is wrapped in "List". how can I extract this? I am new to angular

This is how I am assigning the values

Component Class:

model: dtoModel = {
          List : []
       };

 this.taskService.getTasks(this.request).subscribe(heroes => this.model = heroes);

Models

export interface dto {
    id: number;
    pro: number;
    name: string;
    UserId: number;
    duedate: string;
    status: number;
    active: boolean;
  }

export interface dtoModel {
    List: dto[];
}

In service

getTasks (requestSearch: TaskRequest): Observable<dto[]> {
        return this.http.post<dto[]>(this.Url, requestSearch,  httpOptions);
}

please share your service code

Ali Shahzad
– Ali Shahzad

2019-01-21 08:21:14 +00:00
Commented Jan 21, 2019 at 8:21 — Ali Shahzad
– Ali Shahzad, Commented Jan 21, 2019 at 8:21
I have added service too

Sweetie
– Sweetie

2019-01-21 08:30:57 +00:00
Commented Jan 21, 2019 at 8:30 — Sweetie
– Sweetie, Commented Jan 21, 2019 at 8:30

Dzhavat Ushev · Accepted Answer · 2019-01-21 08:23:31Z

1

You can just use

this.taskService.getTasks(this.request).subscribe(heroes => this.model = heroes.List);

and that will select the List array.

And the model will become

model: dto[] = [];

answered Jan 21, 2019 at 8:23

Dzhavat Ushev

7354 silver badges14 bronze badges

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

Comments

Ankur Shah · Accepted Answer · 2019-01-21 08:31:44Z

0

Can you please do your thing like this way.

 this.srvice.getTasks(this.request)
 .map(data =>{
   //do your logic and convert the data accordingly.
   // then result will be sent to subscribe block
  })
 .subscribe(result =>{
 });

answered Jan 21, 2019 at 8:31

Ankur Shah

4306 silver badges16 bronze badges

Comments

Senal · Accepted Answer · 2019-01-21 08:55:07Z

You can also use map operator in rxjs for this if you need to reuse this getTasks method.

map :Applies a given project function to each value emitted by the source Observable, and emits the resulting values as an Observable.

// In your service method
getTasks() {
  return this.http.get(<url>)
    .pipe(map(tasksObj=> {

       return tasksObj.List;
    }));
}

If you are using angular 5 use below

getTasks() {
  return this.http.get(<url>)
    .pipe(map(tasksObj=> {

       return tasksObj.List;
    }));
}

Checkout this Stackblitz example. Learn more about map operator here.

Dmitriy Kavraiskyi · Accepted Answer · 2019-01-21 13:40:45Z

You should create 2 interfaces like below:

export interface dtoModel = {
   List : ListItem[]
};

export interface ListItem {
    id: number;
    pro: number;
    name: string;
    UserId: number;
    duedate: string;
    status: number;
    active: boolean;
}

Then you can set up types for you request this way:

getTasks (requestSearch: TaskRequest): Observable<dtoModel> {
    return this.http.post<dtoModel>(this.Url, requestSearch,  httpOptions);
}

If all you request returns json with List field I sugest you to use generic type:

 export interface dtoModel<T> = {
       List : <T>[]
 };

 export interface ListItem {
        ....
 }

And request will look like this:

getTasks (requestSearch: TaskRequest): Observable<dtoModel<ListItem>> {
        return this.http.post<dtoModel<ListItem>>(this.Url, requestSearch,  httpOptions);
}

Collectives™ on Stack Overflow

How to map object using subscribe in angular

4 Answers 4

Comments

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Related