如何将 JSON 数组插入 angular 中的 object

Question

我有以下 JSON 数组：

0: {name: "Jan", value: 12}
1: {name: "Mar", value: 14}
2: {name: "Feb", value: 11}
3: {name: "Apr", value: 10}
4: {name: "May", value: 14}
5: {name: "Jun", value: 12}
6: {name: "Jul", value: 10}
7: {name: "Aug", value: 14}
8: {name: "Sep", value: 11}

如何将该响应插入到下面 lineData 数组中的数据 object 中？ （JSON 数据嵌入在本地 JSON 文件中）。 我想将 json 数组响应插入到 linedata 数组的 object 中。

预期格式：

public lineData = [{
    data: [
      { name: 'Jan | 2018', value: 12 },
      { name: 'Jan | 2018', value: 11 },
      { name: 'Jan | 2018', value: 14 },
      { name: 'Jan | 2018', value: 10 },
      { name: 'Jan | 2018', value: 14 },
      { name: 'Jan | 2018', value: 8 }
    ],
    name: 'Component A',
    id: '1'
  }]

相关文件如下：

图表.json

[
    { "name": "Jan", "value": 12 },
    { "name": "Mar", "value": 14 },
    { "name": "Feb", "value": 11 },
    { "name": "Apr", "value": 10 },
    { "name": "May", "value": 14 },
    { "name": "Jun", "value": 12 },
    { "name": "Jul", "value": 10 },
    { "name": "Aug", "value": 14 },
    { "name": "Sep", "value": 11 }
]

图表.ts

export interface IChart {
    name: string;
    value: number;
    //id?: string;
}

图表服务.ts

import { Observable } from 'rxjs';
import { HttpClient } from '@angular/common/http';
import { Injectable, OnInit } from "@angular/core";
import { IChart } from '../chart';


@Injectable({
    providedIn: 'root'
})

export class ChartDataService {

    private url: string = "assets/data/chartData.json";

    constructor(private httpClient: HttpClient) { }
    
    getChartData(): Observable<IChart[]>  {
        return this.httpClient.get<IChart[]>(this.url);
    }
}

图表组件.ts

import { from } from 'rxjs';
import { ChartDataService } from './../../services/chart-data.service';
import { Component, Input, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { IChart } from './../../chart';

@Component({
  selector: 'app-charts',
  templateUrl: './charts.component.html',
  styleUrls: ['./charts.component.css']
})
export class ChartsComponent implements OnInit {

  @Input() chartTitle: string;
  @Input() dataSetType: any;
  public chartDataList : IChart[];

  constructor(private chartDataService: ChartDataService) { }

  ngOnInit() {

    this.chartDataService.getChartData().subscribe( data => {

     //need a solution for here

      }
    ) 
  }
}

Answer 1

首先创建一行数据lineData

export interface lineDataModel {
  data: any[],
  name: string,
  id: string
}

在你的chart.component.ts创建 lineData 数组

lineData: lineDataModel[] = [];

如果 charDataService 中getChartData()的返回值与第一个charDataService数组中的返回值相同。

this.chartDataService.getChartData().subscribe( data => {
  lineData.data.push(data);
}