Bagaimana untuk mencipta jadual secara dinamik daripada tatasusunan?

Question

Saya mempunyai kes penggunaan untuk mencipta jadual dengan data dinamik termasuk nama pengepala. Saya telah mencuba pelbagai cara untuk membina semula tatasusunan daripada respons API tetapi masih tidak dapat membangunkannya.

Terima tatasusunan daripada respons seperti berikut

[
   {
      "category": "Emergency services",
      "code": "RMY 90",
      "limit": "9032",
      "OT": "4124"
   },
   {
      "category": "Pediatrician",
      "code": "RMY 80",
      "limit": "1232",
      "OT": "9412"
   },
   {
      "category": "Neurology",
      "code": "RMY 70",
      "limit": "6423",
      "OT": "7312"
   }
]

Grid dijangka tatasusunan

[
   {
      "item": "Block Code",
      "Emergency services": "RMY 90",
      "Pediatrician": "RMY 80",
      "Neurology": "RMY 70"
   },
   {
      "item": "Total Capacity",
      "Emergency services": "9032",
      "Pediatrician": "1232",
      "Neurology": "6423"
   },
   {
      "item": "OT Capacity",
      "Emergency services": "4124",
      "Pediatrician": "9412",
      "Neurology": "7312"
   }
]

Contoh jadual

Saya telah mencuba menggunakan Object.keys() dan peta tetapi tidak dapat membina tatasusunan dengan betul. Memandangkan kod itu terletak pada sistem pelanggan, saya tidak boleh berkongsinya. Tolong bantu saya membina semula tatasusunan.

Kod saya ialah

const rowList = ["Block Code", "Total Capacity", "OT Capacity"];
  let arr = [];
  const dumming = rowList?.forEach(item => {

    for (const [key, object] of Object.entries(responseData)) {
      let x = [];
      Object.keys(object)?.forEach(item => {
        x.push(object[item]);
      });
      // console.log('rrrr', x);
    }

    let val = responseData.map((ned, index) => {
      let x = {};
      Object.keys(object)?.forEach(item => {
        x = ned[item]
      });
      // let cor = Object.entries(ned).map(([key, leaf]) => key+leaf);
      return {
        id: `${ index }-${ item }`,
        name: item, ...x
      };
    });
    arr.push(val);
  });

  console.log(arr);

Saya tidak pasti sama ada ini betul. Terperangkap

Answer 1

Idea untuk menggunakan rowList adalah bagus, tetapi ia menganggap beberapa susunan kritikal dalam objek input (apabila anda kemudiannya perlu mengaitkan data dengan setiap label), yang secara amnya merupakan idea yang tidak baik bergantung pada beberapa memesan dalam objek biasa .

Walau bagaimanapun, pembolehubah rowList 没有任何作用：尽管您迭代它，但您的代码从不使用 item （它定义了其他 item anda).

Kedua, .map 回调中有一个未知变量 object.

Saya tidak faham mengapa anda menjana pertanyaan dengan id 和 name 键的对象，并生成格式为 ${ index }-${ item } 的字符串 kerana itu tidak sepadan dengan apa-apa pun dalam soalan anda.

Berikut adalah apa yang saya cadangkan:

const responseData = [{"category": "Emergency services","code": "RMY 90","limit": "9032","OT": "4124"},{"category": "Pediatrician","code": "RMY 80","limit": "1232","OT": "9412"},{"category": "Neurology","code": "RMY 70","limit": "6423","OT": "7312"}];

const rowList = [["code", "Block Code"], ["limit", "Total Capacity"], ["OT", "OT Capacity"]];
const result = rowList.map(([key, item]) => ({
    item,
    ...Object.fromEntries(responseData.map((obj) => [obj.category, obj[key]]))
}));

console.log(result);