title: Map JSON for Chartjs with Angular 7
body: <p>Im trying to map JSON Data to show it in a Bar-Chart. The final Array I need has to look like this:[883, 5925, 17119, 27114, 2758].
  Actually, the Array I want to use to set the barChartData (dringlichkeitenValues[])seems to be empty. Sorry for my bad coding skills. Can anyone show me how to solve this Problem?</p>
  
  <p>JSON:</p>
  
  <pre><code>[{
      "id": 1,
      "value": 883
  },
  {
      "id": 2,
      "value": 5925
  },
  {
      "id": 3,
      "value": 17119
  },
  {
      "id": 4,
      "value": 27144
  },
  {
      "id": 5,
      "value": 2758
  }]
  </code></pre>
  
  <p>api.service.ts</p>
  
  <pre><code>getDringlichkeiten(): Observable&lt;IDringlichkeit[]&gt; {
      return this.http.get&lt;IDringlichkeit[]&gt;(this.ROOT_URL + '/aufenthalte/dringlichkeit');}
  </code></pre>
  
  <p>dringlichkeit.ts</p>
  
  <pre><code>  export interface IDringlichkeit {
    id: number;
    value: number;
  }
  </code></pre>
  
  <p>bar-chart.component.ts</p>
  
  <pre><code>   export class BarChartComponent implements OnInit {
  
    public dringlichkeitValues:number[] = [];
    public dringlichkeiten: IDringlichkeit[];
    public barChartLabels:String[] = ["1", "2", "3", "4", "5"];
    public barChartData:number[] = this.dringlichkeitValues;
    public barChartType:string = 'bar';
  
    constructor(private aufenthaltService: AufenthaltService) {
  
    }
  
    ngOnInit() {
      this.loadData();
      this.getDringlichkeitValues();
    }
  
    loadData(){
  
      this.aufenthaltService.getDringlichkeiten()
      .subscribe( data =&gt; this.dringlichkeiten = data);
    }
  
    getDringlichkeitValues(){
      let dringlichkeitValues:number[]=[];
      this.dringlichkeiten.forEach(dringlichkeit=&gt;{
        dringlichkeitValues.push(dringlichkeit.value)
        this.dringlichkeitValues = dringlichkeitValues;
      });
      return this.dringlichkeitValues;
    }
  
  }
  </code></pre>
  
  <p><strong>UPDATE:</strong>
  I updated my component but now my Array is still empty after subscribing to the Observable.</p>
  
  <p>bar-chart.component.ts</p>
  
  <pre><code>chart: Chart;
    dringlichkeiten: IDringlichkeit[] = [];
  
  
    constructor(private aufenthaltService: AufenthaltService) {
    }
  
    ngOnInit() {
  
      this.aufenthaltService.getDringlichkeiten()
      .subscribe( data =&gt; {
        this.dringlichkeiten = data;
  
        //dringlichkeiten-Array full
        console.log(this.dringlichkeiten);
      });
  
      //dringlichkeiten-Array empty
      console.log(this.dringlichkeiten);
  
  
      this.chart = new Chart('canvas', {
        type: 'bar',
        data: {
          labels: this.dringlichkeiten.map(x =&gt; x.id),
          datasets: [
            {
              label: 'Dringlichkeiten',
              data: this.dringlichkeiten.map(x =&gt; x.value),
              backgroundColor: ['#FF6384', '#4BC0C0', '#FFCE56', '#E7E9ED', '#36A2EB']
            }
          ]
        },
      });
  
  
    }
  </code></pre>