CODEWITHSUNDEEP
angularangular2-servicesangular7subscribe
Sweetie
Sweetie

Reputation: 1368

How to map object using subscribe in angular

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

Upvotes: 0

Views: 10588

Answers (4)

Dmitriy Kavraiskyi
Dmitriy Kavraiskyi

Reputation: 319

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

Upvotes: 0

Senal
Senal

Reputation: 1610

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.

Upvotes: 0

Ankur Shah
Ankur Shah

Reputation: 430

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 =>{
 });

Upvotes: 0

Dzhavat Ushev
Dzhavat Ushev

Reputation: 735

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[] = [];

Upvotes: 1

Related Questions