Format an array of Objects to a HTML table - html

Question

I am working in angular and trying to format an API response into a simple HTML table in Angular, this process is generally straightforward when the data is single level eg.
{
property-1: value-1
property-2: value-2
.
.
.
property-n: value-n
}
However my array of Objects looks something like this:
[
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
}
]
What I am hoping to achieve is one table for each index, so index_1 would get one table with column names matching the keys for index_1 (they are always going to be the same keys when the index is the same) and table data being all the data from the different objects in side the main object (if that makes sense)
Gap in Understanding
Where I am having trouble is that the format of the API response is a little weird in that index_1 can show up for as many times as a result for index_1 is spit out, so I don't think I can use a simple ngFor, now there may be a better way for me to format my data from the API response, at the moment this is how I am going about it:
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
Below is a console log of my output for reference:

Answer 1

Data formatting
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>