Getting data from external JSON file into PrimeNG Chart

[dpcamp]

I'm trying to push data into a local variable from my JSON so that I can use that variable for my data set for the chart component. I'm having no luck getting this to work.

Currently my method is this. I have a service that is subscribing to getting the data from my API.

Code: Select all

export class ReportService {
  private reportUrl: string = environment.reportUrl;

  constructor(private http: Http) {}

  /**
   * Get all SRs
   */
  getSR(groupBy: string, beginDate:string, endDate:string): Observable<Report[]> {

    return this.http.get(`${this.reportUrl}/SR?group_by="${groupBy}"&begin_date="${beginDate}"&end_date="${endDate}"`)
      .map(res => res.json().data)
      .catch(this.handleError);
  }

In my component I'm calling my service and subscribing to that data, then reformatting the data into arrays.

Code: Select all

ngOnInit(){
.
.
.


        let newData = [];
        let dataSet1= [];
        let labels = [];
        this.reportService.getSR('Month', lastMonth, today)
        .subscribe(data => {
            dataSet1.push(data.map(a => a.sr_count))

            let monthName = data.map(item => {
                return item.month_name
            })
            labels.push.apply(labels, monthName)
            console.log(labels) //["October", "September"]
        });


        console.log(labels) // I think its [["October", "September"]]
        console.log(newData) // [[109,34]]

        this.data = {
            labels: labels, //undefined
            datasets: [
                {
                    label: 'First Dataset',
                    data: dataSet1, //undefined
                    fill: false,
                    borderColor: '#4bc0c0'
                }

            ]
        }
    }
}

The problem I'm facing is that, while I'm inside the component The data in the variable appears to be formatted correctly, when I call the variable outside of the observable weird things start to happen, and I think the dataset only sees what I believe is the parent Array. I've tried a few things to try and reformat the data once outside the observable, but nothing has worked so far.

In my console you can see the first two arrays are outside the observable, the bottom array is inside the observable.


If anyone has any suggestions or can point me to a tutorial you'll be my hero!!

[northend]

Integrate you data => chartArry
this.data = Object.assign({}, chartArry);