List an array of objects from JQuery, RESTful service using @GET, Java HTML

Question

List an array of objects from JQuery, RESTful service using @GET, Java HTML

Navigation

#1 by (1 votes)
#2 by (0 votes)

0

I have a RESTful service which stores data through a JQuery that sends a json to a POST method that inserts the object into the database.

I also have a method that reads the records from the base, and stores them in an arrayList of objects, which I should be able to list in an html table using jQuery.

How can I show that data in the html table?

Service read:

@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;
}

Function check JQuery: (I tried to make that table but it does not take any value to me)

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.");
    }
});

Testing the service read through the client Restlet brings me the following:

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

How can I put that in a table? Thanks for your help.

java javascript jquery html rest

asked by Megan Lucia 17.04.2018 в 06:17

source

2 answers

How to compare two arrays with text strings and create a new one from repeated words in these Error with android studio 2.3.3: Failed to find target with hash string 'android-26'

score 1 · Answer 1

You have the error when you go through the list: It is not a list of lists, but a list of objects. I give you an example of what could go as function success in your AJAX call

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

score 0 · Answer 2

Create an entire html complex and when you finish iterating, you make it 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.");
    }
  });
}

I removed the async: true because it is a default property.