形式Angular 4からchart.jsのJSONデータが観測可能

Question

私はこれで狂ってしまいましたが、これを理解することはできません。私はデータを手渡しするchart.jsために、独自の配列に「sr_count」と「MONTH_NAME」再フォーマットからデータを取得する必要が

"data": [ 
    { 
     "sr_count": 91, 
     "month_name": "October", 
     "month_num": 10, 
     "year": 2017 
    }, 
    { 
     "sr_count": 50, 
     "month_name": "September", 
     "month_num": 9, 
     "year": 2017 
    } 
] 

：私はこのようにフォーマットされた私のAPIからのデータを持っています。例えば

：

["91","50"] 
["October", "September"] 

私はすべてのデータをマップすることができることをのreportService私は考え出してる私のコンポーネントのコードから、私のAPI

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); 
    } 

からデータをつかんされを持っていますsr_countとmonth_nameを配列に格納し、ローカル変数にプッシュしてchart.jsのデータに使用できるようにします

export class SrReportsComponent implements OnInit { 
    monthName: []; 
    srCount1: []; 
    srCount2: []; 
    data: any; 

ngOnInit() { 
this.reportService.getSRLastMonth() 
     .subscribe(data => { 

      srCount= data.map(item => { 
       return item.sr_count 
      }) 


      console.log(srCount) // ["October", "September"] 

      this.srCount2.push(srCount) // [["52", "41"]] 



     }); 
    this.reportService.getSRThisMonth('Month',lastMonth,today) 
     .subscribe(data => { 

      monthName= data.map(item => { 
       return item.month_name 
      } 
      srCount= data.map(item => { 
       return item.sr_count 
      } 


      console.log(monthName) // ["October", "September"] 

      this.monthName.push(monthName) // [["October", "September"]] 
      this.srCount1.push(srCount) //[["91","50"]] 


     }); 
     console.log(this.monthName)// [["October", "September"]] 



     this.data = { 
      labels: this.monthName, //returns [] 
      datasets: [ 
       { 
        label: 'First Dataset', 
        data: this.srCount1, 
        fill: false, 
        borderColor: '#4bc0c0' 
       }, 
       { 
        label: 'Second Dataset', 
        data: this.srCount2, 
        fill: true, 
        borderColor: '#4ba0c0' 
       } 

      ] 
     } 
} 

push()メソッドを使用すると、chart.jsが見ることができない配列がネストされているようです。私もmonthName[0]を試してみましたが、コンソールにはundefinedがあります

ローカル変数に渡されたobservableから配列を取得して、chart.jsを動作させるにはどうすればよいですか？

Answer 1

だけ移動し、あなたのdataあなたの観察可能な内部。あなたは非同期操作で作業しています。

ngOnInit() { 
     this.reportService.getSR('Month',lastMonth,today) 
      .subscribe(response => {   
      this.data = { 
       labels: response.map(item => { return item.month_name }); 
       datasets: [ 
        { 
         label: 'First Dataset', 
         data: this.srCount, 
         fill: false, 
         borderColor: '#4bc0c0' 
        } 
       ] 
      } 
      }); 

    } 

Answer 2

月名配列を「入れ子にしない」必要がある場合は、array.push.apply（array、array2）アプローチを使用できます（下記のリンクを参照）。だからあなたのアレイの

：

this.monthName.push.apply(this.monthName, monthName); 

https://stackoverflow.com/a/4156156/4219717