0

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.

1
  • 1
    ¿Podrías editar tu pregunta y agregar el código con el que has intentado resolverlo?
    – Marcos
    Commented el 16 feb. 2021 a las 13:58

1 respuesta 1

0

Para este ejemplo utilicé el método map() y Template String "`"

  1. Obtengo un array de títulos validando repetidos.
  2. Recorro el array del API y valido las columnas con el array de títulos.

let resultAPI = [ {
    "Titulo A1" : "Dato A1" ,
    "Titulo A2" : "Dato A2" ,
    "Unidad" : "10" ,
    "Fecha" : "aaaammdd" 
  },
  {
    "Titulo B1" : "Dato B1" ,
    "Titulo B2" : "Dato B2" ,
    "Unidad" : "13" ,
    "Fecha" : "aaaammdd" 
} ]

//Estos son los for a lo que te refieres y que no se repita ✅
//Object.keys() para obtener un array de key ["Titulo A1", "Titulo A2", ...]
let arrtitle = []
resultAPI.forEach(item => {
    Object.keys(item).forEach(nameKey => {
        if(!arrtitle.includes(nameKey)){
            arrtitle.push(nameKey)
        }
    })
})
//usando método nativo map() para recorrer array y  "template strings" para obtener una cadena. Reduce mucho código
let htmlTitle = arrtitle.map(item => {
    return `<th>${item}</th>`
}).join('');
//Ahora con el detalle, map() y Template String usando ``
let htmlRows = resultAPI.map(item => {
    let valueRow = arrtitle.map(nameTitle => {
        //valido los valores por titulo, si no existe devuelvo un string vacío
        return `<td>${(item[nameTitle] == undefined) ? "" : item[nameTitle]}</td>`
    })
    return `<tr>${valueRow.join('')}</tr>`
}).join('')
//Finalmente lo pinto en table
document.getElementsByClassName("table")[0].innerHTML = htmlTitle + htmlRows
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table">
</table>

2
  • Gracias! Me ha sido de muchísimas ayuda. He estado estudiándolo ya que no tenia los conocimientos de todas las funciones que has escrito y he podido aplicarlo en mi caso sin problema! Commented el 17 feb. 2021 a las 6:55
  • 1
    Por si a alguien le ayuda, el lugar donde he podido aprender lo que desconocía con cierta facilidad: javascript.info Commented el 17 feb. 2021 a las 7:01

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.