Wie erstelle ich dynamisch eine Tabelle aus einem Array?

Question

Ich habe einen Anwendungsfall zum Erstellen einer Tabelle mit dynamischen Daten einschließlich Header-Namen. Ich habe mehrere Möglichkeiten ausprobiert, das Array aus der API-Antwort zu rekonstruieren, kann es aber immer noch nicht entwickeln.

Empfangen Sie das Array aus der Antwort wie folgt

[
   {
      "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-erwartetes Array

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

Tabellenbeispiel

Ich habe versucht, Object.keys() und map zu verwenden, kann das Array jedoch nicht richtig erstellen. Da sich der Code auf dem Client-System befindet, kann ich ihn nicht weitergeben. Bitte helfen Sie mir, das Array neu aufzubauen.

Mein Code ist

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

Ich bin mir nicht sicher, ob das richtig ist. Gefangen

Answer 1

使用 rowList 的想法很好，但它假设输入对象中存在一些关键顺序（当您稍后需要将数据与每个标签关联时），这通常是一个坏主意依赖于普通对象中的某些顺序。

但是，您的 rowList 没有任何作用：尽管您迭代它，但您的代码从不使用 item （它定义了其他 item 变量）。

其次，.map 回调中有一个未知变量 object。

我不明白为什么你生成一个带有 id 和 name 键的对象，并生成格式为 ${ index }-${ item } 的字符串 因为这与您问题中的任何内容都不匹配。

以下是我建议的做法：

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