Tengo un problema con un servicio en mi aplicación. Tengo un servicio donde tengo un observable. Ese observable también contiene otro observable y otras dos funciones que procesan los datos del observable interno. El problema es que cuando cargo la aplicación la primera vez quedo indefinido porque el servicio devuelve el observable externo antes de que se complete el observable interno y las funciones de modificación de datos. Me dijeron que puedo usar switchMap para esto, pero me confundí mucho con eso. ¿Alguien puede ayudar a usar SwitchMap para que el observable externo espere al observable interno y las funciones antes de devolver cualquier valor?
Así es como se ve el servicio:
fetchFilteredReservations(filterBy: any, search: any): Observable<any> { this.reservation.fetchReservations().subscribe((data: any) => { const data1 = this.loopData(data) const data2 = this.switchData(data1, filterBy, search) this.filteredReservations = data2 }); return of(this.filteredReservations); } loopData(data: any) { let loopData = data loopData.forEach((element: any) => { let year: any = 0; let month: any = 0; let day: any = 0; day = element.createdDate.slice(0, 1); if (day < 10) { day = '0' + day; } month = element.createdDate.slice(2, 4); if (month < 10) { month = '0' + month; } year = element.createdDate.slice(5, 9); let date = `${year}-${day}-${month}`; element.createdDate = date; if (this.user === element.user) { element.canDelete = true; } else { element.canDelete = false; } }); return loopData } switchData(data: any, filterBy: any, search: any){ let filterData = [] switch (filterBy) { case 'createdBy': return filterData = data.filter( (element: any) => element.user.includes(search) ); case 'createdFor': return filterData = data.filter( (element: any) => element.reservedFor.includes(search) ); case 'createdOn': return filterData = data.filter( (element: any) => element.createdDate.includes(search) ); case 'reservedDate': return filterData = data.filter( (element: any) => element.reservedDateData.includes(search) ); case 'desk': return filterData = data.filter( (element: any) => element.name.includes(search) ); } }Gracias por cualquier ayuda.
Creo que quieres algo como esto:
fetchFilteredReservations(filterBy: any, search: any): Observable<any> { this.reservation.fetchReservations().pipe( switchMap((data: any) => { const data1 = this.loopData(data); const data2 = this.switchData(data1, filterBy, search); this.filteredReservations = data2; return data2; // or this.filteredReservations }) ); }Creo que deberías usar el operador de tubería. Acabo de hacer esto sobre la marcha, pero se vería así:
fetchFilteredReservations(filterBy: any, search: any): Observable<any> { return this.reservation.fetchReservations().pipe( map((data: any): any => const data1 = this.loopData(data) const data2 = this.switchData(data1, filterBy, search) this.filteredReservations = data2 return this.filteredReservations ), ) }