0

Tengo un servicio RESTful el cual almacena datos mediante un JQuery que envía un json a un método POST que inserta el objeto en la base de datos.

Tambien tengo un metodo que lee los registros desde la base, y los almacena en un arrayList de objetos, lo cual deberia poder listar en una tabla html mediante jQuery.

¿Como puedo mostrar esos datos en la tabla html?

Servicio leer:

@GET
@Path("leer")
@Consumes({MediaType.APPLICATION_JSON})
@Produces({MediaType.APPLICATION_JSON})
public ArrayList<Fabricante> leer() {
    Respuesta r = new Respuesta();
   ArrayList<Fabricante> aux = new ArrayList<>();
    OperImpFab oper= new OperImpFab();
    aux = oper.leer();

    return aux;
}

Funcion consultar JQuery: (He intentado hacer esa tabla pero no me toma ningun valor)

function consultar() {
var direccion = "http://localhost:8084/MarcasCarros/app/operaciones/leer";
$.ajax({
    url: direccion,
    type: 'GET',
    async: true,
    contentType: "application/json",
    success: function (r) {
        var lista = [];
        lista = r;

        var table = $('#myTable');
        var row, cell;
        for (var i = 0; i < lista.length; i++) {
            row = $('<tr />');
            table.append(row);
            for (var j = 0; j < lista[i].length; j++) {
                cell = $('<td>' + lista[i][j] + '</td>')
                row.append(cell);
            }
        }

    },
    error: function () {
        alert("Error en consultar.");
    }
});

Probando el servicio leer mediante el cliente Restlet me trae lo siguiente:

[
  {
    "nombre": "Renault",
    "pais": "francia",
    "sede": "rojo"
  },
  {
    "nombre": "Chevrolet",
    "pais": "usa",
    "sede": "verde"
  },
  {
    "nombre": "lkjlk",
    "pais": "lmlk",
    "sede": "lkjm"
  }
]

Como puedo poner eso en una tabla?, gracias por su ayuda

3
  • Tal vez te convenga usar el plugin Datatables de jquery datatables.net/examples/ajax/custom_data_property.html, creo que tendrías que hacer adaptaciones mínimas Commented el 17 abr. 2018 a las 4:25
  • @RuslanLópezCarro Ya me funcionó con el plugin muchisimas gracias! Commented el 17 abr. 2018 a las 5:44
  • Excelente señorita, no dude en compartir su solución como respuesta, seguramente le ayudará a más de uno. Commented el 17 abr. 2018 a las 22:38

2 respuestas 2

1

El error lo tienes al recorrer la lista: No es una lista de listas, sino una lista de objetos. Te pongo un ejemplo de lo que podría ir como función success en tu llamada AJAX

const resultado=[ { "nombre": "Renault", "pais": "francia", "sede": "rojo" }, { "nombre": "Chevrolet", "pais": "usa", "sede": "verde" }, { "nombre": "lkjlk", "pais": "lmlk", "sede": "lkjm" } ];

function success(r) {
    var table = $('#myTable');
    var row, cell;
    r.forEach(function (element) {
        row = $('<tr />');
        table.append(row);
        row.append(`<td>${element.nombre}</td>`);
        row.append(`<td>${element.pais}</td>`);
        row.append(`<td>${element.sede}</td>`);
    });

}


success(resultado);
td {
  border: 1px solid grey;
 
}
table { border-collapse: collapse; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="myTable" />

0

Crea todo un complejo de html y al terminar de iterar, le haces append

function consultar() {
  var direccion = "http://localhost:8084/MarcasCarros/app/operaciones/leer";
  $.ajax({
    url: direccion,
    type: 'GET',
    contentType: "application/json",
    success: function(r) {
      var i = 0,
        tr = "";
      for (i; i < r.length;) {
        tr += `<tr>
            <td>` + r.nombre + `</td>
            <td>` + r.pais + `</td>
            <td>` + r.sede + `</td>
           </tr>`;
        i++;
      }
      $('#myTable tbody').append(tr);
    },
    error: function() {
      alert("Error en consultar.");
    }
  });
}

Le quité el async:true por que es una propiedad por default.

1
  • Si estas usando templates sería más legible que escaparas las variables dentro de las cadenas con ${variable} Commented el 17 abr. 2018 a las 22:40

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.