9

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?

1
  • Puedes intentar convertír tus dos servicios en promesas y ejecutarlas dentro de Promise.all([ tuObservable().toPromise()]).then() (poner los dos observables). Así obtienes un arreglo con los datos cuando todo termine de cargarse.
    – Legna
    Commented el 8 may. 2019 a las 12:45

1 respuesta 1

8

Puedes usar la función de RxJs forkJoin:

import 'rxjs/add/observable/forkJoin';
...


let observables=[];
observables.push(this.http.get(URL1));
observables.push(this.http.get(URL2));
observables.push(this.http.get(URL3));
observables.push(this.http.get(URL4));
forkJoin(observables, arrayOfValues => { this.offerList = arrayOfValues.sort(...)});

Ejemplo funcionando:

const { from,forkJoin } = rxjs;
const {map} = rxjs.operators;

//Por simplificar, creo un Observable desde una promesa
function getObservableAjax(url) {
  return from(fetch(url).then(resp => resp.json()))
      .pipe(map(elem => elem.name)); //de cada respuesta, nos quedamos con el campo name
}

function getCharactersFromStarWars() {
    let observables=[];
    for (let i = 1; i < 10; i++) {
      observables.push(getObservableAjax(`https://swapi.dev/api/people/${i}/`));
    }
    return forkJoin(observables);
}

getCharactersFromStarWars().subscribe(elements => {
  elements.sort(); 
  console.log(elements);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.6.7/rxjs.umd.min.js" integrity="sha512-0/2ebe9lI6BcinFBXFjbBkquDfccT2wP+E48pecciFuGMXPRNdInXZawHiM2NUUVJ4/aKAzyebbvh+CkvRhwTA==" crossorigin="anonymous"></script>

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.