title: Returning object array from service, directly from observable
body: <p>I am fairly new to TypeScript and RxJS, so my understanding of observables and subscriptions are limited.</p>
  <p>I am required to call a method from the service class that returns an object array (for now, it is being logged to the console), and I am to make this call in the component class after a button is clicked.</p>
  <p>The problem that I am running into is that the array is returning as empty in the console when I try to assign it to a variable. However, when I log the result from the http.get method directly, I see my object array.</p>
  <p>I was wondering what I'm overlooking here to get this sort of error, and what can I do to fix it so as to avoid running into this again?</p>
  <p><strong>cars.model.ts</strong></p>
  <pre><code>export interface ICar {
      Make: string;
      Model: string;
      Year: string;
      Specifications: boolean[];
    }
  </code></pre>
  <p><strong>cars.new.mock.json</strong></p>
  <pre><code>[
      {
          &quot;Make&quot;: &quot;Honda&quot;,
          &quot;Model&quot;: &quot;CRV&quot;,
          &quot;Year&quot;: &quot;2021&quot;,
          &quot;Specifications&quot;: [
              true,
              true,
              false,
              true,
              false
          ]
      },
      {
          &quot;Make&quot;: &quot;Toyota&quot;,
          &quot;Model&quot;: &quot;Camry&quot;,
          &quot;Year&quot;: &quot;2021&quot;,
          &quot;Specifications&quot;: [
              true,
              true,
              false,
              true,
              false
          ]
      }
  ]
  </code></pre>
  <p><strong>app.component.html</strong></p>
  <pre><code>&lt;h1&gt;{{title}}&lt;/h1&gt;
  
  &lt;button (click)=&quot;shownewCars()&quot;&gt;New Cars&lt;/button&gt;
  </code></pre>
  <p><strong>app.component.ts</strong></p>
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { CarsService } from './services/cars.service';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent implements OnInit{
  
    title = 'AutoZone';
  
    constructor(private carsService: CarsService){
    }
  
    ngOnInit(): void {
    }
    
    shownewCars(){
      this.carsService.logNewCarsMessage();
      console.log(this.carsService.returnNewCars());
    }
  
  }
  </code></pre>
  <p><strong>cars.service.ts</strong></p>
  <pre><code>import { HttpClient } from '@angular/common/http';
  import { Injectable } from &quot;@angular/core&quot;;
  import { ICar } from '../models/cars.model';
  
  @Injectable({
      providedIn: 'root'
  })
  
  export class CarsService{
      carsURL = '/assets/cars.mock.json';
      newCarsURL = '/assets/cars.new.mock.json'
      private newCars: ICar[] = [];
  
      constructor(private http : HttpClient){}
      
      returnNewCars(): ICar[]{
          this.http.get&lt;ICar[]&gt;(this.newCarsURL).subscribe(result =&gt; {this.newCars = result});
          return this.newCars;
      }
  
      logNewCarsMessage(){
          this.http.get(this.newCarsURL).subscribe((responseData) =&gt; console.log(&quot;Console log New Cars: &quot;, responseData));
      }
  }
  </code></pre>
  <p><strong>Console</strong></p>
  <pre><code>[]
  Console log New Cars: (2)[{...}, {...}]
  </code></pre>