¿Se puede, a partir de un observable en angular, hacer un .map (o algún otro método) y obtener un arreglo con solo una propiedad?

publicado por: Anonymous

Buenos dias soy nuevo en angular y tengo una consulta: Estoy usando un observable para recuperar una llamada al método http get, es decir estoy consumiendo un API, pero la cuestión es que estoy haciendo un CRUD y necesito hacer una comparación para saber si el ID que estoy registrando ya está en la base de datos, entonces quisiera saber si es posible aplicar un .map al observable para solo obtener la propiedad del ID y obtener un nuevo array con solo esta propiedad y de ahí hacer la lógica necesaria.

Este es mi código donde paso los dos parámetros al subscribe del observable, la variable ‘res’ seria la que esta almacenando el array con los objetos, y es la que desearia aplicarle el .map,pero no puedo llamar dicha variable fuera de dicha funcion. Si hay otro metodo o forma de hacerla me gustaria muchsimo que me ayudaran.

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

}

El resultado ( es decir el array con solo los ID de ese observable) lo usuaria en la siguiente función que esta en un componente( ventana modal para editar/ crear un nuevo registro), y que es una funcion que se ejecuta apenas le da al boton enviar

onSubmit() {

  if (this.service.EquipoForm.valid) {

    if () { // Linea donde debo hacer mi logica para saber si voy a crear o 
        editar mi registro en cuestion, basado en si el ID esta ya creado o 
         no // 

      this.service.createEquipo(this.service.EquipoForm.value).subscribe();
    }
    else {
      this.service.updateEquipo(this.service.EquipoForm.value).subscribe();
    }
    this.service.EquipoForm.reset();
    this.service.initializeEquipoFormGroup();
    this.success('Registro Enviado con Exito');
    this.onClose();
   }
 }

Estoy intentando retornar el array con solo una propiedad del objeto completo mediante el operador:


    return this.http.get<Equipos[]>(this.baseurl + 'equipos').pipe(map( 
      data => {
        return data.id_equipo
      }

pero la ultima linea, me aparace el siguiente error:

La propiedad ‘id_equipo’ no existe en el tipo ‘Equipos[]’

donde Equipos[] es una interface

export interface Equipos {

  id_equipo: number;
  nombre: string;
  vendedor: string;
  ip_gestion:string;
  tipo: string;
  localidad:string;
  categoria:string;
  ultima_actualizacion:string;

}

solución

Dejemos claro primero que la clase Observable no es de Angular, sino de una librería que Angular usa llamada RxJS.

Las últimas versiones de RxJS han pasado de usar métodos en la clase Observable a usar operadores, funciones independientes que hay que importar aparte y que se usan dentro del método pipe. Uno de estos operadores es map:

_x000D_

_x000D_

const { of } = rxjs;_x000D_
const { map } = rxjs.operators;_x000D_
_x000D_
const miObservable = of({a:1, b:'texto'});_x000D_
miObservable.subscribe(dato => console.log(dato));_x000D_
_x000D_
const otroObservable = of({a:1, b:'texto'});_x000D_
_x000D_
const mapeado = otroObservable.pipe(_x000D_
  map(dato => {_x000D_
    return dato.b; //nos quedamos sólo con el campo b_x000D_
  })_x000D_
);_x000D_
mapeado.subscribe(d => console.log(d));

_x000D_

<script src="https://unpkg.com/@reactivex/[email protected]/dist/global/rxjs.umd.js"></script>

_x000D_

_x000D_

_x000D_

Por tanto podrías hacer algo como lo siguiente:

_x000D_

_x000D_

const { of } = rxjs;_x000D_
const { map } = rxjs.operators;_x000D_
_x000D_
const elementosEnBD = [_x000D_
 {id:1, b:'texto1'},_x000D_
 {id:12, b:'texto2'},_x000D_
 {id:33, b:'texto3'}_x000D_
];_x000D_
_x000D_
const mockHttpGet = () => of(elementosEnBD);_x000D_
_x000D_
function estaEnBD(id) {_x000D_
  return mockHttpGet().pipe(_x000D_
    map(lista => { //lista es un array de elementos, miramos si alguno concuerda_x000D_
      for (let i = 0; i < lista.length; i++) {_x000D_
        if (lista[i].id === id) {_x000D_
          return lista[i];_x000D_
        }_x000D_
      }_x000D_
      return null;_x000D_
    })_x000D_
  );_x000D_
}_x000D_
_x000D_
_x000D_
estaEnBD(12).subscribe(res => {_x000D_
  console.log(res);_x000D_
});

_x000D_

<script src="https://unpkg.com/@reactivex/[email protected]/dist/global/rxjs.umd.js"></script>

_x000D_

_x000D_

_x000D_

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *