将对象数组格式化为 HTML 表格答案

【问题标题】：Format an array of Objects to a HTML table将对象数组格式化为 HTML 表格
【发布时间】：2021-10-06 20:46:53
【问题描述】：

我正在使用 Angular 并尝试将 API 响应格式化为 Angular 中的简单 HTML 表，当数据是单级时，此过程通常很简单，例如。

{
  property-1: value-1
  property-2: value-2
  .
  .
  .
  property-n: value-n
}

但是我的对象数组看起来像这样：

[
 index: index_1
 value: {
    property-1: value-1
    property-2: value-2
    property-3: value-3
  },
  index: index_1
  value: {
    property-1: value-1
    property-2: value-2
    property-3: value-3
  },
  index : index_2
  value : {
    property-1: value-1
    property-2: value-2
    property-3: value-3
    property-4: value-4
  }
]

我希望实现的是每个索引一个表，因此 index_1 将获得一个表，其列名与 index_1 的键匹配（当索引相同时，它们总是相同的键）和表数据是主要对象中不同对象的所有数据（如果有意义的话）

理解上的差距

我遇到的问题是 API 响应的格式有点奇怪，因为 index_1 可以显示多次，结果 index_1 被吐出，所以我认为我不能使用简单的ngFor，现在可能有更好的方法让我从 API 响应中格式化我的数据，目前我正在这样做：

let results: any[][] = await this.searchAllIndexes(searchTerm);
      
results.forEach(i => i.forEach(j => {
  let json = {
    index: j._index,
    value: j._source //j._source is an object itself
  }
  result.push(json) //result is a local array of objects inside the function
}))
      
this.resultObject = result; //this.result is an array of objects

以下是我的输出的控制台日志以供参考：

【问题讨论】：

你能提供一个示例输入输出吗？两个具有相同名称的属性根本不能存在，它们将被合并到一个对象中，用后者覆盖任何值，因此您的输入要么错误，要么只是误导
啊，我知道它在哪里误导了我应该注意到上面的 JSON 示例是一个对象数组，并修复了我的符号，让我进行必要的编辑，也许这会让它变得更多感觉，对此感到抱歉
@kmp 更改了问题标题和上面的误导性内容，这更好地反映了我的输出
您将其键入为数组数组，将其视为代码中的数组数组，并且您在问题中给出了无效的 json。如果您期望得到正确答案，请修正您的问题。
输入或输出到底是什么，输入/输出功能？表？如果有帮助，屏幕截图是需要进入表格的数据

标签： html angular typescript

【解决方案1】：

数据格式

const data = [
  {
    index: "new_index",
    value: {
      PLN_TYP_CD: "S",
      PLN_TYP_DESC: "Disability",
      INSRT_BTCH_ID: 4033598,
      LST_UPDT_BTCH_ID: -1,
      INSRT_TS: "2017-12-06T11:25:47.891258",
    },
  },
  {
    index: "custom_index_5",
    value: {
      PROV_ASGN_ROLE_TYP_CD: "S",
      PROV_ASGN_ROLE_TYP_DESC: "PHYSICIAN IS A SPECIALIST",
      POL_ORIG_SRC_SYS_CD: "NDB",
      PROV_ASGN_ROLE_TYP_NRML_CD: "S",
    },
  },
  {
    index: "custom_index_5",
    value: {
      PROV_ASGN_ROLE_TYP_CD: "S",
      PROV_ASGN_ROLE_TYP_DESC: "SPECIALIST",
      POL_ORIG_SRC_SYS_CD: "CRR",
      PROV_ASGN_ROLE_TYP_NRML_CD: "S",
    },
  },
  {
    index: "custom_index_5",
    value: {
      PROV_ASGN_ROLE_TYP_CD: "S",
      PROV_ASGN_ROLE_TYP_DESC: "PHYSICIAN IS A SPECIALIST",
      POL_ORIG_SRC_SYS_CD: "OXF",
      PROV_ASGN_ROLE_TYP_NRML_CD: "S",
    },
  },
];

function listNames(data) {
  return data
    .map((item) => item.index)
    .filter((val, i, arr) => arr.indexOf(val) === i);
}

function listColumns(tableName, data) {
  const columnObj = data.find((item) => item.index === tableName).value;
  return Object.getOwnPropertyNames(columnObj);
}

function fillRow(tableData, obj) {
  const row = [];

  for (let i = 0; i < tableData.columns.length; i++) {
    row.push(obj[tableData.columns[i]]);
  }

  tableData.rows.push(row);
}

function formatJSON(data) {
  const output = [];
  const tables = listNames(data);

  for (let i = 0; i < tables.length; i++) {
    const tableData = {
      title: tables[i],
      columns: listColumns(tables[i], data),
      rows: [],
    };

    for (let j = 0; j < data.length; j++) {
      if (data[j].index === tableData.title) {
        fillRow(tableData, data[j].value);
      }
    }

    output.push(tableData);
  }

  return output;
}

console.log(formatJSON(data));

HTML

<div *ngFor="let table of tables">
  <div>{{ table.title }}</div>
  <table>
    <thead>
      <tr>
        <th *ngFor="let column of table.columns">{{ column }}</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let row of table.rows">
        <td *ngFor="let value of row">{{ value }}</td>
      </tr>
    </tbody>
  </table>
</div>

【讨论】：