Comment créer dynamiquement une table à partir d'un tableau ?

Question

J'ai un cas d'utilisation pour créer un tableau avec des données dynamiques comprenant des noms d'en-tête. J'ai essayé plusieurs façons de reconstruire le tableau à partir de la réponse de l'API, mais je n'arrive toujours pas à le développer.

Recevez le tableau de la réponse comme suit

[
   {
      "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"
   }
]

Grille attendue

[
   {
      "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"
   }
]

Exemple de tableau

J'ai essayé d'utiliser Object.keys() et map mais je n'arrive pas à construire le tableau correctement. Le code se trouvant sur le système client, je ne peux pas le partager. S'il vous plaît, aidez-moi à reconstruire le tableau.

Mon code est

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);

Je ne sais pas si c'est correct. Pris au piège

Answer 1

L'idée d'utiliser rowList est bonne, mais elle suppose un certain ordre critique dans l'objet d'entrée (lorsque vous devrez ensuite associer des données à chaque étiquette), ce qui est généralement une mauvaise idée de s'appuyer sur un certain ordre dans un objet normal .

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

Deuxièmement, .map 回调中有一个未知变量 object.

Je ne comprends pas pourquoi vous avez généré une requête avec id 和 name 键的对象，并生成格式为 ${ index }-${ item } 的字符串 car cela ne correspond à rien à votre question.

Voici ce que je recommande :

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);