Angular JSON from API to an Array of value - arrays

Question

I have an API which gives me a JSON in the following format:
[{"timestamp":"1389442547000","PourcentRest":"50"},
{"timestamp":"1389442548000","PourcentRest":"55"},
{"timestamp":"1389868449000","PourcentRest":"45"}]
I need to turn the returned object into an array of values ​​for integration with highchart like this:
[[1389442547000,50],[1389442548000,55],
[1389868449000,45],[1389868450000,73],
[1391177296000,37],[1391177297000,45]]
I've been trying for several days, but I can't do it.
Here is the dataservice which interrogates the 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}`);
}
Here is the part of my 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);
})
}
Please can you help me see it more clearly?

Answer 1

Please use below code after your API response then you will get the output as you want
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);

Answer 2

Parsing your data to int and setting xAxis.type to 'datetime' solves it.
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>