Angular JSON from API to an Array of value

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?

Aman Gojariya · Accepted Answer · 2021-03-04 08:54:09Z

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

answered Mar 4, 2021 at 8:54

Aman Gojariya

1,5031 gold badge12 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

JoeDalton Over a year ago

Thank you very much for the reply. I just set up the following code but it gives me an error :Argument of type 'number' is not assignable to parameter of type 'string'

JoeDalton Over a year ago

here is the code this.TankDetailsService.readMeasures(this.idCit).subscribe((Measure: Measure[])=>{ this.Measure = Measure; let a = Measure; const outputArr = []; for (let i = 0; i < Measure.length; i++) { let b = []; b.push(parseInt(a[i].timestamp), parseInt(a[i].PourcentRest)); outputArr.push(b); }

Aman Gojariya Over a year ago

Can you please tell me your this.Measure variable value is array?

JoeDalton Over a year ago

Measure is declared like this: Measure: Measure[]; Maybe I'm made something wrong in my declaration - I'm a newbe in Typescript

Aman Gojariya Over a year ago

Can you please share your Measure[] model?

|

Marensius Pettersen · Accepted Answer · 2021-03-04 09:18:07Z

0

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>

answered Mar 4, 2021 at 9:18

Marensius Pettersen

1061 silver badge2 bronze badges

Collectives™ on Stack Overflow

Angular JSON from API to an Array of value

2 Answers 2

9 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related