Preserve the order of the http calls in angular

Question

I\'m trying to solve the order problem I\'m facing with several approaches that I found here on SO without a success.

I have a method, where I\'m loading some data f

Answer 1

I would consider to use the concat operator.

Your code would look like the following

    private loadSelectedTileLayersCapabilities(): void {

            let tempTileLayer;
            let concatObs;

            this.selectedTileLayerIds.forEach(
                (selectedTileLayer: string) => {
                    tempTileLayer = this.getTileLayerById(selectedTileLayer);

                    const httpCall = this.capabilitiesService.getTileLayerDimensions(tempTileLayer.url, tempTileLayer.name, tempTileLayer.id);
                    if (!concatObs) {
                        concatObs = httpCall);
                     } else {
                         concatObs.concat(httpCall);
                     }

                }
            );
            concatObs.subscribe(
                dimensions => this.displayNewTileLayer(dimensions)
            );
        }

This way concatObs emits in the same order as the array selectedTileLayersIds. You should consider though if it is possible to move the sequencing logic to the server, i.e. have a service that receives an array of ids (selectedTileLayersIds) and returns and array of dimensions. In this way you would reduce the network traffic and avoid having a chain of sequential synchronous http calls.