title: How can I merge multiple HTTP calls to one entity model in Angular
body: <p>I have this scenario:</p>
  
  <p>This interface represent the axis values.</p>
  
  <pre><code>export interface ChartModel {
      HorizontalElement: number,
      VerticalElement: number
  }
  </code></pre>
  
  <p>I can have multiple charts in one plot, so I use this model.</p>
  
  <pre><code>import { ChartModel } from "./ChartModel";
  
  export interface ResponseModel {
      PrimaryChart: ChartModel[];
      PreviousQuarterChart1: ChartModel[];
      PreviousQuarterChart2: ChartModel[];
      PreviousQuarterChart3: ChartModel[];
  }
  </code></pre>
  
  <p>Now I have two API services that returns the data. One of them I have to call 3 times. How can I do to merge all the calls into one service method and that method returns only one result of type ResponseModel.</p>
  
  <p>What i have is 3 elements like this one for each service call this is what i've called ChartModel:</p>
  
  <pre><code>[
      {
          "HorizontalElement": 0,
          "VerticalElement": 150
      },
      {
          "HorizontalElement": 1,
          "VerticalElement": 236
      },
      {
          "HorizontalElement": 2,
          "VerticalElement": 330
      }
  ]
  </code></pre>
  
  <p>And what i want to do is to concatenate the 3 responses in one object called ResponseModel.
  Something like this:</p>
  
  <pre><code>[
  [{"HorizontalElement":0,"VerticalElement":150},{"HorizontalElement":1,"VerticalElement":236},{"HorizontalElement":2,"VerticalElement":330}],
  [{"HorizontalElement":0,"VerticalElement":150},{"HorizontalElement":1,"VerticalElement":236},{"HorizontalElement":2,"VerticalElement":330}],
  [{"HorizontalElement":0,"VerticalElement":150},{"HorizontalElement":1,"VerticalElement":236},{"HorizontalElement":2,"VerticalElement":330}]
  ]
  </code></pre>