从 API 到值数组的 Angular JSON答案

【问题标题】：Angular JSON from API to an Array of value从 API 到值数组的 Angular JSON
【发布时间】：2021-06-02 21:16:44
【问题描述】：

我有一个 API，它为我提供以下格式的 JSON：

[{"timestamp":"1389442547000","PourcentRest":"50"},
{"timestamp":"1389442548000","PourcentRest":"55"},
{"timestamp":"1389868449000","PourcentRest":"45"}]

我需要将返回的对象变成一个值数组，以便像这样与highchart集成：

[[1389442547000,50],[1389442548000,55],
  [1389868449000,45],[1389868450000,73],
  [1391177296000,37],[1391177297000,45]]

我已经尝试了几天，但我做不到。

这是询问 API 的数据服务

export class TankDetailsService {
    PHP_API_SERVER = "http://MY-API";

  constructor(private httpClient: HttpClient) {}

   readMeasures(idCit: string): Observable<Measure[]>{
    return this.httpClient.get<Measure[]>(`${this.PHP_API_SERVER}/restFillingApi/?idcit=${idCit}`);
  }

这是我的component.ts的一部分

export class TankDetailsComponent implements OnInit {
  
  Measure: Measure[];
  idCit: string;
  chartOptions: object;

  constructor(private route: ActivatedRoute, private TankDetailsService: TankDetailsService, private http: HttpClient) { 
   this.route.queryParams
      .subscribe(params => {
        this.idCit = params['idCit'];
        console.log(this.idCit);
      }
    );
   this.TankDetailsService.readMeasures(this.idCit).subscribe((Measure: Measure[])=>{
      this.Measure = Measure;
      
      console.log(this.arr);

     this.chartOptions = {   
      chart: {
         type: "spline"
      },
      title: {
         text: "Volumes"
      },
      
      yAxis: {          
         title:{
            text:"Volumes"
         } 
      },
      tooltip: {
            pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y} %</b><br/>',
            valueDecimals: 0,
            split: true
        },

      series: [
         {
            name: 'Tokyo',
            data: this.Measure
            
         },
         {
            name: 'New York',
            data: [[1389442547000,50],[1389442548000,55],[1389868449000,45],[1389868450000,73],[1391177296000,37],[1391177297000,45],[1391528879000,38],[1391528880000,71],[1392217092000,54],[1392217093000,69],[1392641513000,61],[1392641514000,72],[1393844672000,40],[1393844673000,63]]
         },
         {
            name: 'Berlin',
            data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
         },
         {
            name: 'London',
            data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
         }
      ]
   };
       console.log(this.chartOptions);
    })

  }

你能帮我看清楚吗？

【问题讨论】：

标签： arrays json angular highcharts

【解决方案1】：

请在您的 API 响应后使用以下代码，然后您将获得所需的输出

let a = [{"timestamp":"1389442547000","PourcentRest":"50"},
{"timestamp":"1389442548000","PourcentRest":"55"},
{"timestamp":"1389868449000","PourcentRest":"45"}];
const outputArr = [];

for (let i = 0; i < a.length; i++) {
    let b = [];
    b.push(parseInt(a[i].timestamp), parseInt(a[i].PourcentRest));
    outputArr.push(b);
}

console.log(outputArr);

【讨论】：

非常感谢您的回复。我刚刚设置了以下代码，但它给了我一个错误：“数字”类型的参数不可分配给“字符串”类型的参数
这里是代码 this.TankDetailsService.readMeasures(this.idCit).subscribe((Measure: Measure[])=>{ this.Measure = Measure; let a = Measure; const outputArr = [ ]; for (let i = 0; i
你能告诉我你的this.Measure变量值是数组吗？
Measure 声明如下： Measure: Measure[];也许我的声明有问题 - 我是 Typescript 的新手
您能分享一下您的 Measure[] 模型吗？

【解决方案2】：

将数据解析为 int 并将 xAxis.type 设置为 'datetime' 即可解决。

let data = [{"timestamp":"1389442547000","PourcentRest":"50"},
{"timestamp":"1389442548000","PourcentRest":"55"},
{"timestamp":"1389868449000","PourcentRest":"45"}]

function parseData() {
    return data.map(data => [parseInt(data.timestamp), parseInt(data.PourcentRest)])
}

Highcharts.chart('container', {

    xAxis: {
        type: 'datetime'
    },

    series: [{
        data: parseData()
    }],


});

<script src="https://code.highcharts.com/highcharts.js"></script>

    <div id="container"></div>

【讨论】：