title: Return list from TypeScript function doing HTTP GET
body: <p>I have a procedure:</p>
  
  <pre><code>products = []
  getAllProducts(){
      this.http.get
      (this.baseUrl + '/products').map((resp:Response) =&gt; resp.json())
        .subscribe(
          (data) =&gt; {
            const products = data;
            this.products = products;
          },
          err =&gt; {}
        );
    }
  </code></pre>
  
  <p>It does work, correctly assigns received list to products variable.
  I want to change it into a function, which returns aforementioned list so that I can reuse this code as a service from another component.
  I tried something like this:</p>
  
  <pre><code>getAllProducts(){
      let localProds = [];
      this.http.get
      (this.baseUrl + '/products').map((resp:Response) =&gt; resp.json())
        .subscribe(
          (data) =&gt; {
            const products = data;
            localProds = products;
          },
          err =&gt; {alert("ERROR: GET localhost:3000/products "); localProds = ['ERROR'];}
        );
      return localProds;
    }
  this.products = this.getAllProducts();
  </code></pre>
  
  <p>I think it should work, though it doesn't. I have two questions:</p>
  
  <p>1) Why the above solution does not work?</p>
  
  <p>2) How to make this function return received list, JSON's list in this case.</p>
  
  <p>EDIT: I agree that question no 2 might have been marked as a duplicate if only I were aware of the fact, that such problem as asynchronous call exists at all. As I did not know that, I still find my whole question (both parts of it) unique for people like me before, newbies to frontend development, who do not know the term "asynchronous call".</p>