0

Estoy tratando de crear un objeto totalmente nuevo con la respuesta que me trae la data desde firebase.

como ejemplo esto es la data de firebase:

"productos" : {
    "-M4pCGMVNNgxTXe0xo34" : { 
      "category" : "libros",
      "banner" : "{\"H3tag\":\"40%\",\"P1tag\":\"Descuento\", \"H4tag\":\"Para Libros en Diciembre\"}",
      "url" : "somos-polvo-de-estrellas"
},

   "-M4pCGMVNNgxOYi0so90" : { 
      "category" : "revistas",
      "banner" : "{\"H3tag\":\"10%\",\"P1tag\":\"Descuento\", \"H4tag\":\"Para Revistas en Enero\"}",
      "url" : "revista-moda-coleccion"
}

recibo la respuesta desde el servicio a mi typescript de esta forma:

this.productosService.getData().pipe(
      map((resp: Productos[]) => resp.map( ({category, banner, url}) => ({category, banner, url}) ))
    )
    .subscribe(resp => {

      if(resp){

        resp.forEach(element => {

         let cat = element.category;

         let banner = JSON.parse(element.banner);

         let url = element.url;
          
        
        })
      
      }
 
    });

al hacer un console.log(banner); y obtengo esto:

Object { "H3tag": "40%", "P1tag": "Disccount", "H4tag": "Para Libros en Diciembre"}

Object { "H3tag": "10%", "P1tag": "Disccount", "H4tag": "Para Revistas en Enero"}

hasta ahí creo que todo bien, pero no se como incluir en un arreglo las otras propiedades como son category y url para que un objeto nuevo quede de esta forma:

Object { "category" : "libros", "H3tag": "40%", "P1tag": "Disccount", "H4tag": "Para Libros en Diciembre", "url" : "somos-polvo-de-estrellas"}

Object { "category" : "revistas", "H3tag": "10%", "P1tag": "Disccount", "H4tag": "Para Revistas en Enero", "url" : "revista-moda-coleccion"}

Alguna idea que me ayude lograr esto por favor? espero se comprenda... saludos.!

2
  • Por qué esos campos no vienen en la respuesta?
    – Bicho
    Commented el 11 ene. 2021 a las 17:05
  • a que te refieres?
    – Fran-Love
    Commented el 11 ene. 2021 a las 18:30

1 respuesta 1

1

Basta con incluir la sentencia JSON.parse(...) dentro del .map() y utilizar el spread Operator '...' para combinar los campos.

this.productosService.getData().pipe(
  map((resp: Productos[]) => resp.map( ({category, banner, url}) => ({category, ...JSON.parse(banner), url}) ))
)
.subscribe(resp => {
  if(resp){
    resp.forEach(element => {
      console.log(element) // el objeto banner mergeado con las otras keys
    })
  }
});

Cuidado que usando el operador puedes sobreescribir llaves cuando los nombres de éstos se repitan entre el objeta que estás 'spredeando' y el objeto resultante que recibe el 'spread'

1
  • wooo es perfecto. muchas gracias por tu respuesta. Gracias!!
    – Fran-Love
    Commented el 11 ene. 2021 a las 18:43

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.