title: Pushing two HTTP responses into one array
body: <p>When my view is initalized 2 HTTP requests are made and the data is saved to two different arrays. I don't want to have two for loops in my html to pull info from both. My question is how can I have push returned information to just one array? Is that possible? Would I have to use localstorage? (The keys in the interface and the keys returned in the json response are named exactly the same). </p>
  
  <p>I need to save id, group, preset in the first response, and colorCode, colorGrade, colorType in the second (I've left comments in each of the subscribes below) </p>
  
  <pre><code>info: infoInterface[];
  info2: infoInterface[];
  
  ngOnInit() {
  
    this.getInfo.getPCode()
      .subscribe(
        (dieInfo: DieInfoInterface[]) =&gt; this.dieInfo = dieInfo,
        // On response I need to store id, group, preset 
        (error: Response) =&gt; console.log(error)
      );
  
    this.getInfo.getCCodes()
      .subscribe(
        (dieInfo2: DieInfoInterface[]) =&gt; {
        // on response I need to store colorCode, colorGrade, colorType
          this.dieInfo2 = dieInfo2
  
        },
        (error: Response) =&gt; console.log(error)
      );
  }
  </code></pre>
  
  <p>getInfo service </p>
  
  <pre><code>getPCode(): Observable&lt;any&gt; {
    return this.http.get('')
      .map(
        (response: Response) =&gt; {
          return response.json().inform;
        }
      );
  }
  
  getCCodes(): Observable&lt;any&gt; {
    return this.http.get('')
      .map(
        (response: Response) =&gt; {
          return response.json().inform;
        }
      );
  }
  </code></pre>
  
  <p>The interface </p>
  
  <pre><code>export interface infoInterface {
  
    id: number;
    group: any;
    colorCode: string;
    colorGrade: any;
    colorType: string;
    preset: string;
  }
  </code></pre>
  
  <p>How I'm displaying the data. Currently I'm displaying data from <code>info[]</code> because I dont want two for loops</p>
  
  <pre><code>&lt;div class="row" *ngFor="let i of info"&gt;
    &lt;div class="info col-sm-3"&gt;
      &lt;div class="row"&gt;
        &lt;h1&gt;Die: &lt;/h1&gt;
        &lt;p&gt; {{ info.id }} &lt;/p&gt;
      &lt;/div&gt;
  
      &lt;div class="row"&gt;
        &lt;h1&gt;Color Code: &lt;/h1&gt;
        &lt;p&gt; {{ info.group }} &lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>