Angular changing JSON keys names

July 13, 2023

I am quite new to angular and working with API’s… In my project I am using ngCharts and this chart requires that the keys names in JSON are "value" and "name"… what I get on the API I’m using is keys names "count" and "label"… how and whre could I change the keys name in my code? I cant change it on API.

this is how I’m getting the data from API in my service:

  getSingleCustomerPurchasesChart(id:number) {
     return this.httpClient.get<typeof single>(`${environment.apiUrl}stat/prodaja/${id}`)
   }

this is the model of data that is required for ngxChart:

 export var single: {
   value: number;
   name: string;
 }

this is what the JSON of API looks like:

[
    {
        "count": 123,
        "label": "Lorem ipsum",
        "id": "42807"
    },
]

>Solution :

You can use rxjs map operator:

getSingleCustomerPurchasesChart(id:number) {
  return this.httpClient.get<typeof single(`${environment.apiUrl}stat/prodaja/${id}`)
   .pipe(map(response => {
       return response.map((data) => {
        return {
         name: data.label,
         value: data.count,
        };
       }) 
   }))
}