Show JSON in a table [duplicated]

Question

Show JSON in a table [duplicated]

Navigation

#1 by (0 votes)
#2 by (0 votes)
#3 by (0 votes)
#4 by (-1 votes)

0

I have a small problem, I am starting to program in Java, and I can not list a JSON file in a table, I have only managed to recover the json.

My json is this:

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

And my code is like this for the moment, I can only recover the raw data of the Json but I can not pass it to a table:

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

javascript json

asked by Santiago Campusmana 26.04.2018 в 18:35

source

4 answers

0

Using jQuery this type of behavior is greatly facilitated by using the $.ajax() to get the data of the json and once obtained, you can modify the DOM and display said table. For example:

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>

answered by 26.04.2018 в 20:15

0

As I have the Json in a .json file, I bring the data with the get and request, and applying what you indicate and I do not know if my logic is correct, I have placed it that way, however I still can not visualize the data .

Getting 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>

answered by 26.04.2018 в 20:21

-1

Until then you're fine, just that the tables are not generated automatically as with a gridview in VisualStudio, here you have to do them by hand, you have 2:

make tables by hand and fill them from javascript Here is a thread on how to do it link
download a front-end framework such as AngularJs and the framework will fill them with a ng-repeat, which in the long run will be of better help, but you have to study it a little more thoroughly

answered by 26.04.2018 в 19:30

Error: Unable to find optional library: org.apache.http.legacy GROUP BY in SQLServer does not work the same as in MySQL

score 0 · Accepted Answer

First, as Carlos said, you have to create the table in your HTML, then, from javascript you have to go through the json and for each element insert a row in your table. For example:

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

With the append method of JQuery you can create and insert elements in the DOM , and the values of your json take it the traditional way.