javascript - Angular การเปลี่ยนชื่อคีย์ของ JSON
ฉันค่อนข้างใหม่กับ Angular และการทำงานกับ API... ในโปรเจกต์ของฉันฉันกำลังใช้ ngCharts และแผนภูมินี้ต้องการให้ชื่อคีย์ใน JSON เป็น "value" และ "name"... แต่สิ่งที่ฉันได้รับจาก API ที่ฉันใช้คือชื่อคีย์ "count" และ "label"... ฉันสามารถเปลี่ยนชื่อคีย์ในโค้ดของฉันได้อย่างไรและที่ไหน? ฉันไม่สามารถเปลี่ยนมันใน API ได้
นี่คือวิธีที่ฉันกำลังดึงข้อมูลจาก API ในบริการของฉัน:
getSingleCustomerPurchasesChart(id:number) {
return this.httpClient.get<typeof single>(`${environment.apiUrl}stat/prodaja/${id}`)
}
นี่คือรูปแบบของข้อมูลที่จำเป็นสำหรับ ngxChart:
export var single: {
value: number;
name: string;
}
นี่คือลักษณะของ JSON ของ API:
[
{
"count": 123,
"label": "Lorem ipsum",
"id": "42807"
},
]
คำตอบ #1
คุณสามารถใช้ตัวดำเนินการ map ของ rxjs ได้:
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,
};
})
}))
}
คำตอบ #2
ฉันคิดว่าคุณสามารถแก้ไขปัญหานี้ด้วย Javascript พื้นฐานได้ นี่คือวิธีแก้ไขด้านล่าง แต่ฉันจำเป็นต้องรู้เกี่ยวกับข้อมูลของคุณเล็กน้อยและว่าคุณต้องการวาดกราฟแบบไหนเพื่อให้มั่นใจว่ามันจะใช้งานได้ นอกจากนี้ มันเป็นแค่ Javascript ธรรมดา ฉันปล่อยให้คุณพิมพ์เอง
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);กรุณาดูที่ https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map สำหรับรายละเอียดเพิ่มเติมเกี่ยวกับเมธอด map
