Estoy haciendo peticiones a una API y me gustaría crear una tabla HTML con los títulos que me llegasen. El problema que tengo es que no sé cómo listar los títulos para crear las columnas, ya que dependiendo de qué petición haga me devuelve unos datos u otros.
Por ejemplo:
[
{
"Titulo A1": "Dato A1",
"Titulo A2": "Dato A2",
"Unidad": "10",
"Fecha": "aaaammdd"
},
{
"Titulo B1": "Dato B1",
"Titulo B2": "Dato B2",
"Unidad": "13",
"Fecha": "aaaammdd"
}
]
La idea es hacer una tabla con todos los títulos y que quede de esta manera:
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table">
<tr>
<th>#</th>
<th>Fecha</th>
<th>Titulo A1</th>
<th>Titulo A2</th>
<th>Titulo B1</th>
<th>Titulo B2</th>
</tr>
<tr>
<td>10</td>
<td>Fecha</td>
<td>Dato A1</td>
<td>Dato A2</td>
<td>Dato B1</td>
<td>Dato B2</td>
</tr>
</table>
Mi consulta es, ¿cómo poder listar los títulos del JSON?, ya que no sé cómo leer esos datos. Mis conocimientos son básicos y cuando pruebo algunas cosas con un for
me devuelve object Object
o undefined
.
Una vez sepa cómo hacerlo crearía un objeto donde iría metiendo todos los títulos con un for
. Supongo que con otro for
haría la comprobación de que no estuviese ese título ya en el objeto para así no repetirlo.
Una vez los tuviese tendría que mirar cómo poner los datos en sus respectivas columnas para que estuviese correcto. Un switch me serviría, creo.