Question 206698 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Angular changing JSON keys names

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"
    },
]
Tags:

2

Answers


  1. 0

    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,
        };
       }) 
   }))
}
    Login or Signup to reply.
  2. 0

    You can solve this with basic Javascript I think. Here is a solution below, but I would have to know a little bit about your data and what chart you want to draw to be sure that it’s going to work. Also, it’s plain old javascript, I leave you the typing :

    const apiData = [
    {
        "count": 123,
        "label": "Lorem ipsum",
        "id": "42807"
    },
    {
        "count": 124,
        "label": "Lorem ipsum 2",
        "id": "42808"
    },
];

const chartData = apiData.map((e) => { 
    return { 
  name: e.label,
  value: e.count
  }
})

console.log(chartData);

    Please have a look at https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map for more details about the map method.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search