Contexto
Tenemos una vista de ofertas en el frontal que tiene este aspecto:
<table>
<tbody>
<tr *ngFor="let offer of offerList">
<td>{{offer[0].appArea.creationDate}}</td>
<td>{{offer[0].client.id}}</td>
<td>{{offer[0].client.name}}</td>
...
</tr>
</tbody>
</table>
Esta offerlist
se recoge de una base de datos de una forma menos tradicional: se guardan en la base de datos
únicamente los ids y un hash, con el que se accede a una red IPFS que es la que tiene los datos de las ofertas.
Además, está montado de tal manera que, para obtener un array de n
ofertas, se hacen exactamente n + 1
peticiones:
la primera trae el array con los ids y hash, y las n
siguientes son resultado de iterar por ese array y pedir a la
IPFS los datos:
export class OffersComponent implements OnInit{
offerList: Array<any> = []
loadOffersForClient(email) {
this.offerService.getOwnerInitialOffers(email).subscribe(
(initOfferResponse) => {
initOfferResponse[0].offers.map((item) => {
this.offerService.getOfferFileData(item.hashId).subscribe(
(itemResponse) => {
this.offerList.push([itemResponse, item, ]);
}
);
});
}
);
}
}
El servicio hace simples llamadas con el cliente http:
export class OfferService {
constructor(private http: HttpClient) { }
getOwnerInitialOffers(email: string) {
return this.http.post<any>(`path/to/offers/${email}`); // se traen datos por post porque asi esta especificada la api
}
getOfferFileData(hashId: string) {
return this.http.get<any>(`path/to/file/server/${hashId}`);
}
}
Problema
Los requerimientos han cambiado y necesitamos ordenar el array. Por fecha, para ser más exactos. El problema viene por que no tengo claro cuándo puedo ordenar el array estando seguro de que los elementos han terminado de llenarse.
Hasta ahora, se me había ocurrido ordenarlo por fuerza bruta, cada vez que se lanza una nueva petición:
this.offerService.getOfferFileData(item.hashId).subscribe(
(itemResponse) => {
this.offerList.push([itemResponse, item, ]);
this.offerList.sort((a, b) => {
const firstDate = a[0].applicationArea.creationDateTime;
const secondDate = b[0].applicationArea.creationDateTime;
return (firstDate < secondDate) ? 1 : ((firstDate > secondDate) ? -1 : 0);
});
}
);
Aparte de ser increíblemente ineficiente, no funciona, entiendo que los elementos no han sido cargados para cuando la ordenación se produce.
¿Cómo puedo asegurarme de que el array ya ha sido cargado, para poder ordenar una sola vez y sin peligro de que entren nuevos elementos?
Promise.all([ tuObservable().toPromise()]).then()
(poner los dos observables). Así obtienes un arreglo con los datos cuando todo termine de cargarse.