title: Format object from API call to dataTable format on Google Charts (ng2-google-charts)
body: <p>I'm using <a href="https://www.devrandom.it/software/ng2-google-charts/index.html" rel="nofollow noreferrer">ng2-google-charts</a> to build a geoChart in an Angular 10 project.
  Everything works good with fixed data, the problem I have is that I'm not sure how to format (and add) the data from an API call.</p>
  <p>This is my geoChart property that works perfectly with fixed data</p>
  <pre><code>public geoChart: GoogleChartInterface = {
     chartType: 'GeoChart',    
     dataTable: [
       ['Country', 'Ice Machines'],
       ['Austria', 1],
       ['Belgium', 2],
       ['Bulgaria', 3],    
     ],
     options: {},
  };
  </code></pre>
  <p>This is the object (data.response) that I receive from the API --&gt;
  [{…}, {…}, {…}, {…}, {…}, {…}]</p>
  <pre><code>0: {paisCode: &quot;DE&quot;, total: 1}
  1: {paisCode: &quot;DK&quot;, total: 1}
  2: {paisCode: &quot;ES&quot;, total: 1}
  3: {paisCode: &quot;FR&quot;, total: 1}
  4: {paisCode: &quot;NL&quot;, total: 1}
  5: {paisCode: &quot;RO&quot;, total: 1}
  length: 6
  </code></pre>
  <p>This is what I'm trying:</p>
  <pre><code>data.response.forEach(element =&gt; {
     let countryCode = element.paisCode;
     let totalPerCountry = element.total;
     //formattedDataMap +=  &quot;[&quot; + &quot;'&quot; + countryCode +&quot;'&quot; + ',' + totalPerCountry + &quot;],&quot;;
     this.geoChart.dataTable.push('[' + countryCode + ',' + totalPerCountry + ']')
     formattedDataMap.push('[' + countryCode + ',' + totalPerCountry + ']')
     //console.log(formattedDataMap);
  })
  </code></pre>
  <p>But the data is not added <strong>correctly</strong>:</p>
  <pre><code>0: (2) [&quot;Country&quot;, &quot;Total&quot;]
  1: (2) [&quot;Austria&quot;, 1]
  2: (2) [&quot;Belgium&quot;, 2]
  3: (2) [&quot;Bulgaria&quot;, 3]
  4: &quot;[DE,1]&quot;
  5: &quot;[DK,1]&quot;
  6: &quot;[ES,3]&quot;
  7: &quot;[FR,1]&quot;
  8: &quot;[NL,1]&quot;
  9: &quot;[RO,1]&quot;
  </code></pre>
  <p><strong>Update:</strong>
  I've updated my method, however nothing happens to the array. It's the same size and has the same elements.</p>
  <pre><code>  async myMethod() {
       if (this.account.email) {
          (await this.myService.MyMethod())
          .pipe(first())
          .subscribe(async (data: any) =&gt; {        
             this.geoChart.dataTable.concat(                
               data.response.reduce((acc, curr) =&gt; {
               acc.push([curr['paisCode'], curr['total']]);
               return acc;
             }, [])
          ); 
          console.log(this.geoChart.dataTable);
      });       
     }
   }
  </code></pre>