0

hola necesito mostrar elementos que me muestra la api en formato json en mi documento html, mi api me da lo siguiente: consola

el codigo js es el siguiente :

const url='http://192.168.0.79:8080/Presentacion/SirtacAlicuotaServlet'

fetch(url)
.then(response=> response.json() )
.then(data => {

    let elementos=document.getElementById('elemento')
    elementos.innerHTML =  `
    <td>${data.index}</td>
    <td>${data.letra}</td>
    <td>${data.alicuota}</td>
    <td>${data.periodo}</td>
    <td>${data.estado}</td>
    `;
    console.table(data)
})
.catch(err=>console.log(err))

en el html es asi:

 <H1 align="left"><strong> Alicuotas</strong></H1>

        
        <table align="center" border="1">
          <tr>
          <td id="index">index</td>
          <td id="letra">letra</td>
          <td id="alicuota">alicuota</td>
          <td id="periodo">periodo</td>
          <td id="estado">estado</td>
          </tr>
          </table>
          <div align="center" id="elemento"></div>

me da undefined ,como lo soluciono?

4
  • Tendrías que poner un ejemplo mínimo de como es data, seguramente sea un array que tienes que recorrer.
    – Emeeus
    el 14 jun. 2021 a las 15:44
  • la data es lo que sale en la imagen ,es un array de 28 elementos, contiene un index, una letra, una alicuota ,periodo y estado el 14 jun. 2021 a las 15:51
  • Has probado hacer uso de fetch(url).then(function(response) { //La variable response tiene datos, recoge los datos por aqui. });. De todas formas usa un depurador en el data para asegurar. el 14 jun. 2021 a las 15:51
  • tambien lo hice con fetch pero es el mismo problema, no me muestra los datos en el html el 14 jun. 2021 a las 15:55

2 respuestas 2

0

Este código debe estar dentro de .then, basicamente se recorre data con forEach, cada iteración de esas es una fila, y luego se recorre cada propiedad de cada elemento con for in, cada iteración de esas es una columna dentro de esa fila.

const data = [{letra:"A",alicuota:18.5,periodo:3,estado:"A"},
{letra:"B",alicuota:18.3,periodo:5,estado:"B"}]; //<-- Es solo un ejemplo minimo

const table = document.getElementById("alicuotas");

data.forEach((e,i) => {    //< ---  recorremos data

  let tr = document.createElement("tr"); //< ---  creamos una fila
  
  let td = document.createElement("td"); //< ---  Hacemos columna index dentro de la fila
  td.classList.add("index");
  td.innerHTML = i;
  tr.appendChild(td); //< --- Agregamos la columna en la fila

  for (p in e) {  //< ---  recorremos cada propiedad de cada elemento

    let td = document.createElement("td"); //< ---  Hacemos columna dentro de la fila
    td.classList.add(p);//<-- le podemos agregar a toda la columna la misma clase
    td.innerHTML = e[p]; 

    tr.appendChild(td); //< --- Agregamos la columna en la fila

  }

  table.appendChild(tr); //< --- Agregamos la fila a la tabla

});
<H1 align="left"><strong> Alicuotas</strong></H1>
<table align="center" border="1" id="alicuotas">
  <tr>
    <td id="index">index</td>
    <td id="letra">letra</td>
    <td id="alicuota">alicuota</td>
    <td id="periodo">periodo</td>
    <td id="estado">estado</td>
  </tr>
</table>
<div align="center" id="elemento"></div>

10
  • yo lo ejecute y me sale igual. me da error el 14 jun. 2021 a las 16:31
  • Cuidado que al html yo le agregue un id a la tabla id="alicuotas"
    – Emeeus
    el 14 jun. 2021 a las 16:32
  • copie todo y me da error : ``` el 14 jun. 2021 a las 16:33
  • Me olvidé de aclarar lo del id, pero debería funcionar sin problemas, que error dice?
    – Emeeus
    el 14 jun. 2021 a las 16:34
  • vi el id ,lo agregue pero al ejecutar no me muestra los datos el 14 jun. 2021 a las 16:34
0

Si ya lo tienes asi hazlo mejor con datatable

https://datatables.net/examples/ajax/objects.html

2
  • La idea no es mala, pero deberías incluír un mínimo código de como haría eso
    – Emeeus
    el 14 jun. 2021 a las 16:08
  • De hecho, deberías eliminar tu respuesta y agregarla como comentario si no puedes desarrollar mas el tema, pues puede que sea mal votada y afecte tu reputación, un saludo, si puedes desarrollarla mas, edita. el 14 jun. 2021 a las 16:09

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.