Here is a JSON Array that I have:
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}
I am looking for a way to insert this response into the data object within the lineData array provided below. The JSON data is sourced from a local JSON file and needs to be incorporated into the linedata array.
The desired format is as follows:
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'
}]
The relevant files are listed below:
chart.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 }
]
chart.ts
export interface IChart {
name: string;
value: number;
//id?: string;
}
chart.service.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);
}
}
chart.component.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
}
)
}
}