0

tengo un pequeño inconveniente, estoy empezando a programar en Java, y no puedo listar en una tabla un archivo JSON, solo he llegado a recuperar el json.

Mi json es el siguiente:

{   "alumnoUTP":   [
    {"nombre":"Ricardo","apePaterno":"Carpio","edad":39},
    {"nombre":"Thiago","apePaterno":"Carpio","edad":5},
    {"nombre":"José","apePaterno":"Carpio","edad":74}   ] }

Y mi código esta así por el momento, solo puedo recuperar la data en bruto del Json pero no consigo pasarlo a una tabla:

<html>
  <head>
    <meta charset="utf-8">

    <title>Obteniendo Json</title>
  </head>

  <body>

    <div id="datosPersona"></div>

    <script>
    var requestURL = 'http://localhost:8383/Semana04-2018-2/Resources/json/alumnoUTP.json';
    var request = new XMLHttpRequest();
    request.open('GET', requestURL);
    request.responseType = 'json';
    request.send();

    function cargarDatos()
    {
        var DatosJson = request.response;
        document.getElementById("datosPersona").innerHTML=DatosJson;
    }

    </script>
    <button type="button" onclick="cargarDatos()">
    Visualizar
    </button>
  </body>
</html>
3
  • 1
    Como quieres pasarlo a una tabla si nisiquiera tienes una tabla en tu codigo?
    – alanfcm
    Commented el 26 abr. 2018 a las 16:38
  • Discúlpame, recién me estoy iniciando en Java, si se la estructura html de una tabla, pero no entiendo bien como aplicarlo. Commented el 26 abr. 2018 a las 16:43
  • en tu html crea tu tabla y en las celdas es donde vas apuntar los datos de tu json Commented el 26 abr. 2018 a las 16:50

4 respuestas 4

0

Primero, como comentó Carlos, tienes que crear la tabla en tu HTML, luego, desde javascript tienes que recorrer el json y por cada elemento insertar una fila en tu tabla. Por ejemplo:

<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<title>Obteniendo Json</title>
<body>
<div id="datosPersona">

<table id="Table"></table>
</div>

<script>

var json = {"alumnoUTP":[{"nombre":"Ricardo","apePaterno":"Carpio","edad":39},{"nombre":"Thiago","apePaterno":"Carpio","edad":5},{"nombre":"José","apePaterno":"Carpio","edad":74}]};

function cargarDatos(){
    var DatosJson = JSON.parse(JSON.stringify(json));
    console.log(DatosJson.alumnoUTP.length);
    $("#Table").append('<tr><td>Nombre</td>'+
    '<td>Apellido paterno</td>' + 
    '<td>Edad</td>');
    for (i = 0; i < DatosJson.alumnoUTP.length; i++){

 $("#Table").append('<tr>' + 
    '<td align="center" style="dislay: none;">' + DatosJson.alumnoUTP[i].nombre + '</td>'+
    '<td align="center" style="dislay: none;">' + DatosJson.alumnoUTP[i].apePaterno + '</td>'+
    '<td align="center" style="dislay: none;">' + DatosJson.alumnoUTP[i].edad + '</td>'+'</tr>');
    }
}

</script>
<button type="button" onclick="cargarDatos()">
Visualizar
</button>
</body>
</html>

<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<title>Obteniendo Json</title>
<body>
<div id="datosPersona">

<table id="Table"></table>
</div>

<script>

var json = {"alumnoUTP":[{"nombre":"Ricardo","apePaterno":"Carpio","edad":39},{"nombre":"Thiago","apePaterno":"Carpio","edad":5},{"nombre":"José","apePaterno":"Carpio","edad":74}]};

function cargarDatos(){
    var DatosJson = JSON.parse(JSON.stringify(json));
    console.log(DatosJson.alumnoUTP.length);
    $("#Table").append('<tr><td>Nombre</td>'+
 	'<td>Apellido paterno</td>' + 
 	'<td>Edad</td>');
    for (i = 0; i < DatosJson.alumnoUTP.length; i++){
 
 $("#Table").append('<tr>' + 
 	'<td align="center" style="dislay: none;">' + DatosJson.alumnoUTP[i].nombre + '</td>'+
 	'<td align="center" style="dislay: none;">' + DatosJson.alumnoUTP[i].apePaterno + '</td>'+
 	'<td align="center" style="dislay: none;">' + DatosJson.alumnoUTP[i].edad + '</td>'+'</tr>');
    }
}

</script>
<button type="button" onclick="cargarDatos()">
Visualizar
</button>
</body>
</html>

Con el método append de JQuery puedes crear e insertar elementos en el DOM, y los valores de tu json lo tomás de la manera tradicional.

0
0

Usando jQuery se facilita bastante este tipo de comportamiento utilizando la función $.ajax() para obtener los datos del json y una vez obtenido, podrás modificar el DOM y mostrar dicha tabla. Por ejemplo:

var requestURL = 'http://localhost:8383/Semana04-2018-2/Resources/json/alumnoUTP.json';

// reemplazo este acá pero sólo para testear que funcione
requestURL = 'https://next.json-generator.com/api/json/get/V1S5vbo2N';

// agrego el evento onclick al botón
$('#visualizar').on('click', function() {
  $.ajax({
    url: requestURL,
    success: function(data) {
      // una vez que obtenga el json parseo los resultados
      $datos = $('#datosPersona');

      // creo la tabla y muestro los datos
      $tabla = $('<table></table>');

      // hago un ciclo
      for (var i = 0; i < data.alumnoUTP.length; i++) {
        var $tr = $('<tr></tr>');
        $tr.append('<td>' + data.alumnoUTP[i].nombre + '</td>');
        $tr.append('<td>' + data.alumnoUTP[i].apePaterno + '</td>');
        $tr.append('<td>' + data.alumnoUTP[i].edad + '</td>');
        
        // agrego la columna tr a la tabla
        $tabla.append($tr);
      }

      // agrego la tabla al div datosPersona
      $datos.append($tabla);
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="datosPersona"></div>

<button type="button" id="visualizar">
  Visualizar
</button>

0

como tengo el Json en un archivo .json, traigo la data con el get y request, y aplicando lo que me indicas y no se si mi lógica sea correcta, lo he colocado asi, sin embargo aun no logro visualizar los datos.

Obteniendo Json

<div id="datosPersona"></div>

<script>
var requestURL = 'http://localhost:8383/Semana04-2018-2/Resources/json/alumnoUTP.json';
var request = new XMLHttpRequest();
request.open('GET', requestURL);
request.responseType = 'json';
request.send();

function cargarDatos()
{
    var datajson = request.response;

    var DatosJson = JSON.parse(JSON.stringify(datajson));
    console.log(DatosJson.alumnoUTP.length);
    $("#Table").append('<tr><td>Nombre</td>'+
    '<td>Apellido paterno</td>' + 
    '<td>Edad</td>');
    for (i = 0; i < DatosJson.alumnoUTP.length; i++){
    $("#Table").append('<tr>' + 
    '<td align="center" style="dislay: none;">' + DatosJson.alumnoUTP[i].nombre + '</td>'+
    '<td align="center" style="dislay: none;">' + DatosJson.alumnoUTP[i].apePaterno + '</td>'+
    '<td align="center" style="dislay: none;">' + DatosJson.alumnoUTP[i].edad + '</td>'+'</tr>');
}
}
</script>
<button type="button" onclick="cargarDatos()">
Visualizar
</button>

2
  • En ese caso, sólo tienes que usar JSON.parse(datajson) en lugar de JSON.parse(JSON.stringify(datajson)).
    – Mario L
    Commented el 26 abr. 2018 a las 18:25
  • Muchísimas gracias, ya me funcionó, eres el puto amo! Commented el 26 abr. 2018 a las 18:42
-2

Hasta ahi estas bien, solo que las tablas no se generan automaticamente como con un gridview en VisualStudio, aqui hay que hacerlas a mano, tienes de 2:

  • hacerlas tablas a mano y rellenarlas desde javascript aqui hay un hilo de como hacerlo https://stackoverflow.com/a/5364802/4505280

  • descargar un framework de front-end como AngularJs y que el framework te las rellene con un ng-repeat, que a la larga este te va a ser de mejor ayuda, pero hay que estudiarle un poco mas a fondo

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