-2

tengo un problema al mostrar datos JSON en una tabla HTML mediante un ajax, estoy usando MVC de Codeigniter...

listarProducto();
function listarProducto() {;
  var base_url = $("#base_url").val();
  var URL = base_url + 'clientes/listarProducto';
  $.ajax({
    url: URL,
    type: 'POST',
    DataType: 'json',
    success: function(data) {
      var valor = '<tr>' +
        '<td>' + data.id + '</td>' +
        '<td>' + data.codigo + '</td>' +
        '<td>' + data.nombre + '</td>' +
        '<td>' + data.descripcion + '</td>' +
        '<td><button class="btn btn-danger fa fa-trash"></button>&nbsp;&nbsp;<button class="btn btn-warning fa fa-pencil"></button></td>' +
        '</tr>';
      $("#tbodyProducto").html(valor);
    }
  });
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div class="box-body">
  <div class="table table-responsive">
    <table class="table table-hover">
      <thead>
        <tr>
          <th>#</th>
          <th>CODIGO</th>
          <th>NOMBRE</th>
          <th>DESCRIPCION</th>
          <th>OPCIONES</th>
        </tr>
      </thead>
      <tbody id="tbodyProducto">

      </tbody>
    </table>
  </div>
  <!-- /.box-body -->
</div>



// Controlador
public function listarProducto()
  {
      $data['productos'] = $this->Producto_model->getList();
      // $data = $this->Producto_model->getList();
      echo json_encode($data);

  }
// Dotos JSON 

{"productos":[{"id":"1","codigo":"P00001","nombre":"Inca Kola 1200 ml","descripcion":"Bebida helada","precio":"8.50","stock":"45","categoria_id":"1","estado":"1"},{"id":"2","codigo":"P00002","nombre":"Fanta 450 ml","descripcion":"Gaseosa helada","precio":"7.30","stock":"45","categoria_id":"1","estado":"1"},{"id":"3","codigo":"P00003","nombre":"Pilsen Callao","descripcion":"Bebidas heladas","precio":"7.00","stock":"45","categoria_id":"1","estado":"1"}]}

2
  • 1
    ¿cuál es el problema?
    – Shaz
    el 25 mar. 2018 a las 14:27
  • 3
    Al final no explicas cuál fue el problema, de todos modos veo que así como tienes el código no te imprimirá una tabla porque deberás hacer un for de data. el 25 mar. 2018 a las 17:11

1 respuesta 1

2

Bueno tu problema es aqui:

success: function(data) {
      var valor = '<tr>' +
        '<td>' + data.id + '</td>' +
        '<td>' + data.codigo + '</td>' +
        '<td>' + data.nombre + '</td>' +
        '<td>' + data.descripcion + '</td>' +
        '<td><button class="btn btn-danger fa fa-trash"></button>&nbsp;&nbsp;<button class="btn btn-warning fa fa-pencil"></button></td>' +
        '</tr>';
      $("#tbodyProducto").html(valor);
    }

si puedes ver el json que recibes el manda la información dentro de la llave productos que a su vez tiene un array de productos

{"productos":[{"id":"1","codigo":"P00001","nombre":"Inca Kola 1200 ml","descripcion":"Bebida helada","precio":"8.50","stock":"45","categoria_id":"1","estado":"1"},{"id":"2","codigo":"P00002","nombre":"Fanta 450 ml","descripcion":"Gaseosa helada","precio":"7.30","stock":"45","categoria_id":"1","estado":"1"},{"id":"3","codigo":"P00003","nombre":"Pilsen Callao","descripcion":"Bebidas heladas","precio":"7.00","stock":"45","categoria_id":"1","estado":"1"}]}

la forma como deberías hacerlo es asi:

  var valor = ''
  data.productos.forEach(product => {
    valor += "<tr>"+
     "<td>" + product.id + "</td>"+
     "<td>" + product.codigo + "</td>"+
     "<td>" + product.nombre + "</td>"+ 
     "<td>" + product.descripcion + "</td>"+
     "<td><button class='btn btn-danger fa fa-trash'>
        </button>&nbsp;&nbsp;<button class='btn btn-warning fa fa-
         pencil'></button></td>"+
     "<tr>";
  })
  $("#tbodyProducto").html(valor);

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.