Question

我正在尝试将API中的数据加载到PrimeNG图表中并且没有任何运气。目前我一直在尝试订阅我的服务，从我的API获取数据。

我认为我可以做的是从我的组件订阅该数据，重新格式化并将其推送到本地变量数组。

我遇到的问题是，一旦我从可观察对象外部调用数组，数据就会嵌套自己。

来自我的API的数据格式如下：

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

获取数据的服务

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

我的组件

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'
                }

            ]
        }
    }
}

这也可能是我的误解。我假设数组被嵌套在变量之外，因为这是它在chrome的控制台中的样子

让我走上正确道路的任何帮助都会非常感激！我试过，连接，push.apply，甚至lodash试图压扁阵列。所有这三个都给了我[]的结果。

我也尝试将this.data置于我的观察中。当发生这种情况时，我无法访问primeNG代码<p-chart type="line" [data]="data"></p-chart>中的数据。如果尝试使用多个API调用来加载数据集，我也会认为这样做会很麻烦。

Answer 1

最后想出了这个。分享答案，以防任何人遇到这个。

将我的observable中的数据导入this.data的正确方法是

        this.reportService.getSR('Day', lastMonth, today)
    .subscribe(data => {
        this.data.datasets[0].data = data.map(a =>  a.sr_count);
        this.data.labels = data.map(a =>  a.day_name);
        this.chart.refresh();

    });

如何从JSON获取数据以在PrimeNG折线图中使用？

1 个答案: