Retuning values from HTTP POST instead of Observable

Question

I'm working on a city based angular application.

1. getPlaceId function will get the google place_id value.
2. Based on the place_id getPlacesPhotoRef should return 10 photo ref.

What I'm trying to do is, I wanted the photo ref to be pushed to photo's array.

expected output.

{
 formatted_address: 'xxx',
 place_id: 'xxx',
 photos: [...] //All 10 photo ref
}

But issue is, instead of values, I see Observable getting returned in the photos array.

Below is my code

  getPlaceId(cityName) {
    let httpPath = `http://localhost:5001/calvincareemailservice/us-central1/webApi/api/v1/getplaces`;
    return this.http.post(httpPath, { city: cityName }).subscribe(res => {
      if (res) {
        let data = JSON.parse(JSON.stringify(res));
        this.placeIds.push({
          formatted_address: data.candidates[0].formatted_address, 
          place_id: data.candidates[0].place_id, 
          photos: this.getPlacesPhotoRef(data.candidates[0].place_id)
          .subscribe(res => {
            let data = JSON.parse(JSON.stringify(res));
            return data.result.photos.map(pic => pic.photo_reference);
          })
        }
        );
      }
    });
  }

  getPlacesPhotoRef(id) {
    let httpPath = `http://localhost:5001/calvincareemailservice/us-central1/webApi/api/v1/getplacesid`;
    return this.http.post(httpPath, { placeId: id })
  }

Answer 1

You are very close and thinking about the problem correctly, but the issue is you have assigned an Observable subscription to your photos key rather than the data the .subscribe() actually returned, which I would imagine is what you had hoped you were doing.

At a high level, what you want to do is push a new object to this.placeIds once you have all of the information it needs, eg formatted_address , place_id and photos . So what you need to do here is:

1. Call the /getplaces endpoint and store the place data
2. Call the /getplacesid endpoint using data.candidates[0].place_id and store the photos data
3. After both endpoints have returned construct an object using all the data and push this object to this.placeIds

Simple example with nested .subscribe() calls:

getPlaceId(cityName) {
    const httpPath = `http://localhost:5001/calvincareemailservice/us-central1/webApi/api/v1/getplaces`;

    return this.http.post(httpPath, { city: cityName })
      .subscribe(res => {
        if (res) {
          const data = JSON.parse(JSON.stringify(res));
          const formatted_address = data.candidates[0].formatted_address;
          const place_id = data.candidates[0].place_id
        
          this.getPlacesPhotoRef(place_id)
            .subscribe(res => {
              const data = JSON.parse(JSON.stringify(res));
              const photos = data.result.photos.map(pic => pic.photo_reference)
            
              this.placeIds.push({
                formatted_address,
                place_id,
                photos
              })
            })
          );
        }
    });
  }

Note: A more elegant way to do this would be to use concatMap