title: Angular, include observable data in a mapped array
body: <p>I have a service that takes in a type of data and a set of selected items as an array. It needs to respond to the call as an array of objects. My mock data has worked find but now I'm hooking up to an API which is in another service:</p>
  
  <pre><code>public getDataSet(type: string, data: Observable&lt;object&gt;) {
    // loop through each item
    const dataSet = data.map(item =&gt; {
      // get the start time
      const x = moment(item.hid.timeStarted.epochSecond);
  
      // get the percent
      const y = type === 'metrics' ? item.percentage : item.messageCount;
  
      // set the x/y values for the chart
      return {x: x, y: y};
    });
  
    return dataSet;
  }
  
  public getChartData(type: DataTypes, chartData: []) {
    const params = this.getParams();
    const data = chartData.map(item =&gt; {
      // create an empty set, the value of them item, and get the chart points
      const set = {};
      const dataValues = type === 'metrics' ?
        this.metricService.getMetricsData(params.app, params.dc, params.node, item)
        : this.countService.getCountsData(params.app, params.dc, params.node, item);
  
      // store the label and chart points
      set['label'] = item;
      set['data'] = this.getDataSet(type, dataValues);
  
      return set;
    });
  
    return data;
  }
  </code></pre>
  
  <p>Obviously in <code>getDataSet</code> there's an issue with <code>chartData.map</code> since <code>chartData</code> is an observable. Not sure how to get that data out of the returned api call to manipulate and return it to the component waiting on the data.</p>