CODEWITHSUNDEEP
javascriptangulartypescript
Cesar Justo
Cesar Justo

Reputation: 803

How could a map make an observable in angular

I want to make a map to an observable in angular to obtain a property of the object (array) that I am consuming from an api, since I want to make a validation in that array to know if to update / create record.

Good afternoon, I wanted to make a query, I make http queries through observable, as I show below:

public getAllEquipos() : Observable<Equipos[]> {
      return this.http.get<Equipos[]>(this.baseurl + 'equipos')
  }

And then I use this data in a data table of angular material:

RenderDataTable() {   

  this.service.getAllEquipos().subscribe(  
    (res) => {  
      this.dataSource = new MatTableDataSource();  
      this.dataSource.data = res;  
    //  console.log(this.dataSource.data);
    //  this.dataSource.sort = this.sort; 
      this.dataSource.paginator = this.paginator;
       console.log(res)      
    },  
    (error) => {  
      console.log('Se produjo un error mientras intentaba recuperar Usuarios!' + error);  
    });

}

a question I was going to ask you, is it possible the variable res, which is the first parameter of the subscribe method, will you use outside of that function? Since it is the arrangement in question, I mention it to you because I need to make a map to the observable that I am getting to only obtain a property of the object, that is, I just want to bring the property to me, and then use this object or array to do a check. when I want to update / create a record, since depending on whether the ID is already in the array the record will be updated, otherwise it will be created.

Neither do I know how to apply the map to my observable, if you could help me with that I would greatly appreciate it.

` Observable <Equipos[]>: in this case <Equipos[]> is an interface `

PD: the getAllEquipos () function is in a service file while the RenderDataTable () function is in component

Upvotes: 0

Views: 730

Answers (2)

Jack A.
Jack A.

Reputation: 4443

Since I don't know what your create/update code looks like, I'll do this as a function that returns true if the item already exists. I'll assume that your Equipos class contains a numeric id property that uniquely identifies each item.

@Component()
class TableComponent {

    private existingIds: number[] = []; // initialize with empty array to avoid errors in itemExists

    RenderDataTable() {
        this.service.getAllEquipos().subscribe(  
            (res) => {
                this.dataSource = new MatTableDataSource();  
                this.dataSource.data = res;  
                //  console.log(this.dataSource.data);
                //  this.dataSource.sort = this.sort; 
                this.dataSource.paginator = this.paginator;
                console.log(res);

                // res is an array, so use map function to extract an array of id properties
                this.existingIds = res.map(item => item.id);
            },  
            (error) => {  
                console.log('Se produjo un error mientras intentaba recuperar Usuarios!' + error);  
            });
    }

    private itemExists(id: number) {
        return this.existingIds.includes(id);
    }
}

Upvotes: 1

rmrouse88
rmrouse88

Reputation: 291

you can apply an rxjs map operator in either the getAllEquipos() method of your service, or inside the RenderDataTable() method on your component. In either case, you will need the pipe and map operators.

map will automatically wrap the value returned from the transform function in an observable so that it continues to return an observable for either additional chaining or direct subscription.

import {pipe} from 'rxjs'
import {map} from 'rxjs/operators'

//at the service
public getAllEquipos() : Observable<Equipos[]> {
      return this.http.get<Equipos[]>(this.baseurl + 'equipos')
                                    .pipe(
                                          map(res => res.targetProperty)                                                                    

  }


//in your component
RenderDataTable() {   

  this.service.getAllEquipos().pipe(map(res => res.targetProperty)).subscribe(  
    (res) => {
      this.dataSource = new MatTableDataSource();  
      this.dataSource.data = res;  
    //  console.log(this.dataSource.data);
    //  this.dataSource.sort = this.sort; 
      this.dataSource.paginator = this.paginator;
       console.log(res)      
    },  
    (error) => {  
      console.log('Se produjo un error mientras intentaba recuperar Usuarios!' + error);  
    });

}

Upvotes: 0

Related Questions