title: How to run an Observable several times and concat its results correctly?
body: <p>I have this observable that produces JSON, really an API which returns text from different books.
  I need to call this observable several times and concatenate the results in the <em>correct order</em>.
  I have derived a playground code at stackblitz please use it to derive a solution answer, but I will accept inline code as well.</p>
  <p>If you could provide two solutions one running the observable calls in parallel and sequentially, that would be great. Perhaps it will light up the bulb inside my head.  If they run in parallel I need the results to be organized sequentially by BookIndex.</p>
  <p>I have read many blogs, rxjs docs, and SO pages on Observables and Promises but it's a topic that does not sink in and a source of continuous struggle. I have also attempted to convert Observable to promise via toPromise() but it did not lead me to success.  On the searches I've done before this post on Observable I see mentions of .concact and joinFork, however I don't know how to apply them to derive a solution.</p>
  <p>Here is some of the code I am struggling with.  Calling BuildAndShow() seems to produce the calls to the observable, as observed in the console, but I don't see the final result in the alert as if
  &quot;<strong>await</strong> MessagesBuild()&quot; returned prematurely without waiting for completion of MessagesBuild().</p>
  <p><a href="https://stackblitz.com/edit/ionic-k8t49r?file=pages%2Fhome%2Fhome.ts" rel="nofollow noreferrer">https://stackblitz.com/edit/ionic-k8t49r?file=pages%2Fhome%2Fhome.ts</a></p>
  <pre><code> // uses a class member/field to build strings into it
   // can it be written to use a local then return it?
    async MessagesBuild() {
      this.Messages_ = &quot;&quot;;
      for (let BookIndex = 0; BookIndex &lt; 4; BookIndex++) {
        await this.RandomString(BookIndex).subscribe(data =&gt; {
          this.Messages_ += data + &quot;\n&quot;;
          console.log(data);
        });
      }
      return this.Messages_;  // I have difficulty grasping how returns should be coded??
    }
    //
    async ShowLast() {
      alert(this.Messages);
    }
    //
    async BuildAndShow() {
      await this.MessagesBuild();
      alert(this.Messages);
    }
  </code></pre>
  <p>If my coding was correct</p>
  <ol>
  <li>Pressing &quot;<strong>Build and Show Messages</strong>&quot; I would see the final concatenated strings in the alert.</li>
  <li>Pressing &quot;<strong>Build Async Messages</strong>&quot; would have updated the bound view to display the final result not just the first page.</li>
  </ol>
  <p><a href="https://i.stack.imgur.com/CeGEV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CeGEV.png" alt="enter image description here" /></a></p>
  <p>What can you assume about me:</p>
  <ol>
  <li><p>After 4 years at this all I understand is that promise.then(() =&gt;{...}) and observable.subscribe(() =&gt;{...}) execute when they complete.</p>
  </li>
  <li><p>I am learning the hard way that sprinkling this syntactic sugar of async/await randomly ain't solving this asynchronous world.</p>
  </li>
  </ol>
  <p>--Thank you. Your help is immensely appreciated.</p>
  <p><strong>UPDATE 1:</strong></p>
  <p>I have incorporated @Nenad Milosavljevic answer in the following stackblitz
  <a href="https://stackblitz.com/edit/ionic-wkplkm?file=pages%2Fhome%2Fhome.ts" rel="nofollow noreferrer">https://stackblitz.com/edit/ionic-wkplkm?file=pages%2Fhome%2Fhome.ts</a></p>
  <p>The  &quot;<strong>Build and Show Messages</strong>&quot;  is working.
  However, not sure about &quot;<strong>Build Async Messages</strong>&quot; it appears Angular is not able to call a method returning Promise so I have added BuildOnly() : string.
  Results (Angular bound) don't seem to be updating in the view.</p>
  <p>Check it out.
  <a href="https://stackblitz.com/edit/ionic-wkplkm?file=pages%2Fhome%2Fhome.ts" rel="nofollow noreferrer">https://stackblitz.com/edit/ionic-wkplkm?file=pages%2Fhome%2Fhome.ts</a></p>
  <p>**If you happen to know of a solution using observable only (no promises) I would be curious to know how simple or ugly it looks :)  Thank you.</p>
  <p><strong>UPDATE 2:</strong></p>
  <p>One way to make Nenad's solution update the view, requires triggering the change detect manually. I dug up an import line from 2018 :) do you think I can pop this junk from the back of my cortex just like that?.</p>
  <p>import { ChangeDetectorRef } from '@angular/core'; // 20180129</p>
  <p>like so</p>
  <p><a href="https://i.stack.imgur.com/S9jmY.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/S9jmY.png" alt="enter image description here" /></a></p>
  <p>Trevor's solution uses ngZone.run to achieve the same (though I could not call it automatic Angular change detection).</p>