可观察的返回单个数组

Question

Problem:

I want to return a single array at once, instead of multiple arrays currently being returned one-by-one.

Code:

fetchAllRiders() {
  var distanceObs = Observable.create(observer => {
    this.http.get(this.API + '/driver/all').map(res => res.json())
      .subscribe(data => data.map(rider => {
          this.geocoder.geocode({
            location: {
              lat: rider.driver_lat,
              lng: rider.driver_lng
            }
          }, (results, status) => {
            if (status == google.maps.GeocoderStatus.OK) {
              this.distanceMatrixService.getDistanceMatrix({
                  origins: [this.from],
                  destinations: [results[0].formatted_address],
                  travelMode: google.maps.TravelMode.DRIVING
                },
                (response, status) => {
                  if (status == google.maps.DistanceMatrixStatus.OK) {
                    this.distances.push({
                      distance: response.rows[0].elements[0].distance.value,
                      rider_id: rider._id
                    })
                  }
                })
              observer.next(this.distances);
            }
          })
        })
        //looping ends 
      )
  })
  return distanceObs
}

How can I go about getting the array after all the pushing is done?

Answer 1

There are couple of problems in this code:

• Callback Hell can be solved using switchMap/mergeMap/concatMap operators
• Imperative subscription management

If properly rewritten it might look like this:

function fetchAllRiders() {
  // it's better to rewrite this services so they will return Observable insated of using callback
  const geocode = Observable.bindCallback(this.geocoder.geocode);
  const getDistanceMatrix = Observable.bindCallback(this.distanceMatrixService.getDistanceMatrix);

  return this.http
    .get(this.API + '/driver/all')
    .switchMap(res => res.json())
    .mergeMap(rider =>
      geocode({
        location: {
          lat: rider.driver_lat,
          lng: rider.driver_lng,
        },
      })
        .filter(([results, status]) => status === google.maps.GeocoderStatus.OK)
        .switchMap(([results]) =>
          getDistanceMatrix({
            origins: [this.from],
            destinations: [results[0].formatted_address],
            travelMode: google.maps.TravelMode.DRIVING,
          }),
        )
        .filter(([results, status]) => status === google.maps.DistanceMatrixStatus.OK)
        .map(([response]) => ({
          distance: response.rows[0].elements[0].distance.value,
          rider_id: rider._id,
        })),
    )
    .toArray();
}

Answer 2

Observable subscribe implements 3 methods: onNext , onError , onCompleted .

.subscribe( 
data=>{ onNext},
err=>{ onError},
()=>{ onCompleted}
)

onCompleted will trigger last iteration of onNext . You can define next in onCompleted .

Refer to http://reactivex.io/documentation/operators/subscribe.html for more information

Answer 3

My point is here first fetch the data from 'Api/driver/all'. In subscribe method you have 3 methods to implement. 'OnNext','OnError'and'OnCompleted'. You can return observable in error and completed.

Please check the below code

 this.http.get(this.API + '/driver/all').map(res => res.json())
        .subscribe(
            data => {data.map(
                rider => {
            this.geocoder.geocode({
              location: {
                lat: rider.driver_lat,
                lng: rider.driver_lng
              }
            }, (results, status) => {
              if (status == google.maps.GeocoderStatus.OK) {
                this.distanceMatrixService.getDistanceMatrix({
                    origins: [this.from],
                    destinations: [results[0].formatted_address],
                    travelMode: google.maps.TravelMode.DRIVING
                  },
                  (response, status) => {
                    if (status == google.maps.DistanceMatrixStatus.OK) {
                      this.distances.push({
                        distance: response.rows[0].elements[0].distance.value,
                        rider_id: rider._id
                      })
                    }
                  })

              }
            });
          })
          //looping ends 
        },
        err=>{
            return Observable.create(observer=>{
                observer.next(this.distances);
            })
        },
        ()=>{
            return Observable.create(observer=>{
                observer.next(this.distances);
            })
        })