Angular Observables: Sequence of calls

Question

I’m sure the answer has to be out there but I can’t quite seem to find the case that I’m looking for. I’ll explain this in non-angular code in a simplistic made up example.

In any rational language it would look something like this:

public Book CreateBook(Book theBook)
{
   //theBook is an object submitted by client code. 
   //it has 2 properties missing, call them “Property1” and
   //“Property2”

   //Property1 is filled in by calling one service
   theBook.Property1 = service1.GetMeMyValue();

   //Property2 is filled in automatically by the second service
   //and the updated value is returned.  Property1 MUST be filled in before
   //this is called.
   theBook = service2.SaveBook(theBook);

   return theBook;
}

Angular HTTP calls always return Observables. I can't find the magic sequence of passing the buck to get this to work. The closest I can come in Angular speak is:

createBook(theBook : Book) : Observable<Book>
{
   return this.http.get("http://service1/someEndpoint")
      .map(item => {
         theBook[“Property1”] = item.json()[“Property1”];

         //something next here or outside?  Outside most likely.
      });
}

Anything I try with this returns null/undefined regardless of what I do with the inner values (or any modification I try to the outer return).

I’m sure the solution is quite obvious for anyone used to Angular (which is slightly better than JavaScript’s S&M syntax), but it quite escapes me and I’m hoping someone can nudge me in the right direction.

This isn't related to Angular per se, it's due to the asynchronous behaviour of javascript and web in general. Check https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call, then for the angular/rxjs version: https://stackoverflow.com/questions/43055706/how-do-i-return-the-response-from-an-observable-http-async-call-in-angular2 — eko, Jul 26 '17 at 15:53
I've been able to get the value from any single call just fine. I can see how I can use this value to pass into the next call. What I can't see is how/what i return at the method level to allow the client to get the result from the inner (2nd) HTTP call. — user3228938, Jul 26 '17 at 15:56
If you want to chain observables: https://stackoverflow.com/questions/36712659/angular-2-two-backend-service-calls-on-success-of-first-service/36712707#36712707 — eko, Jul 26 '17 at 15:57
By the way the Observable in `createBook` method of yours won't work because your map function isn't returning anything. — eko, Jul 26 '17 at 15:58
I know, that is just where I got stuck. I'd tried returning stuff there as well as the outside. I'll update the details with a result when I verify one works. — user3228938, Jul 26 '17 at 16:29

score 0 · Answer 1 · answered Jul 26 '17 at 17:17

SOLUTION:

createBook(theBook : Book) : Observable<Book>
{
   return this.http.get("http://service1/someEndpoint")
      .flatmap(item => {

         //update Property1 with value from 1st GET
         theBook[“Property1”] = item.json()[“Property1”];

         //now create on 2nd service
         return this.http.post(
           “http://service2/createBook”,
           theBook,
           this.createRequestOptions(token))
           .map(response => response.json());
      });
}

Angular Observables: Sequence of calls

1 Answers1