ค้นหาเว็บไซต์

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