0

Tengo el siguiente json

[  
 {"id":1, "proveedor_id":1, "nombre":"ham Clasica", "precio":3}, 
 {"id":2, "proveedor_id":1, "nombre":"ham Alioli", "precio":4.8}, 
 {"id":3, "proveedor_id":1, "nombre":"ham Guayanesa", "precio":4.5}, 
 {"id":4, "proveedor_id":1, "nombre":"ham New York", "precio":5.6}, 
 {"id":5, "proveedor_id":1, "nombre":"ham Tender Crispy", "precio":5.7}, 
 {"id":6, "proveedor_id":1, "nombre":"ham Chicken Roma", "precio":5.5}, 
 {"id":7, "proveedor_id":1, "nombre":"ham Steak Lomito", "precio":6.2}  
]

...y lo recibo a través de este código:

query.done(function(data) {
    JSON.parse(data);
});

Mi pregunta es ¿cómo recorrer y obtener todos los valores del json para posteriormente desplegarlo en una tabla html con jquery o js?


me sale siguiente error en cosola

jquery-3.5.1.min.js:2 Uncaught TypeError: Cannot use 'in' operator to search for 'length' in [{"id":1,"proveedor_id":1,"nombre":"ham Clasica","precio":3},{"id":2,"proveedor_id":1,"nombre":"ham Alioli","precio":4.8},{"id":3,"proveedor_id":1,"nombre":"ham Guayanesa","precio":4.5},{"id":4,"proveedor_id":1,"nombre":"ham New York","precio":5.6},{"id":5,"proveedor_id":1,"nombre":"ham Tender Crispy","precio":5.7},{"id":6,"proveedor_id":1,"nombre":"ham Chicken Roma","precio":5.5},{"id":7,"proveedor_id":1,"nombre":"ham Steak Lomito","precio":6.2}]
at p (jquery-3.5.1.min.js:2)
at Function.each (jquery-3.5.1.min.js:2)
at Object.<anonymous> (index.js:29)
at c (jquery-3.5.1.min.js:2)
at Object.fireWith [as resolveWith] (jquery-3.5.1.min.js:2)
at l (jquery-3.5.1.min.js:2)
at XMLHttpRequest.<anonymous> (jquery-3.5.1.min.js:2)

y utilicé el .each de esta manera:

query.done(function (data) {
    JSON.parse(data);
    $.each(data, (index, value) =>{
      console.log(value);
    });
});
1

2 respuestas 2

4

Puedes iterarlos con $.each de jQuery de la siguiente manera:

const data = [{"id":1,"proveedor_id":1,"nombre":"ham Clasica","precio":3},{"id":2,"proveedor_id":1,"nombre":"ham Alioli","precio":4.8},{"id":3,"proveedor_id":1,"nombre":"ham Guayanesa","precio":4.5},{"id":4,"proveedor_id":1,"nombre":"ham New York","precio":5.6},{"id":5,"proveedor_id":1,"nombre":"ham Tender Crispy","precio":5.7},{"id":6,"proveedor_id":1,"nombre":"ham Chicken Roma","precio":5.5},{"id":7,"proveedor_id":1,"nombre":"ham Steak Lomito","precio":6.2}];

$.each(data, (index, value) =>{
  console.log(value);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

En caso de querer usar los valores de cada objeto, seria bueno hacerlo de esta manera:

const table = $("#table");
const data = [
  {"id":1,"proveedor_id":1,"nombre":"ham Clasica","precio":3},
  {"id":2,"proveedor_id":1,"nombre":"ham Alioli","precio":4.8},
  {"id":3,"proveedor_id":1,"nombre":"ham Guayanesa","precio":4.5},
  {"id":4,"proveedor_id":1,"nombre":"ham New York","precio":5.6},
  {"id":5,"proveedor_id":1,"nombre":"ham Tender Crispy","precio":5.7},
  {"id":6,"proveedor_id":1,"nombre":"ham Chicken Roma","precio":5.5},
  {"id":7,"proveedor_id":1,"nombre":"ham Steak Lomito","precio":6.2}
];

$.each(data, (index, value) =>{

  const row = $(document.createElement("tr"));
  const secRow = $(document.createElement("tr"));
  
  for(let prop in value){
  
    if(index === 0){
      
      const cellHead = $(document.createElement("th"));
      cellHead.text(prop);
      secRow.append(cellHead);
      table.append(secRow);
      
    }
    
    const cell = $(document.createElement("td"));
    cell.text(value[prop]);
    row.append(cell);
    
  }
  
  table.append(row);
});
table{
  border-collapse: collapse;
  border: 1px solid #000;
  text-align: center;
}

tr, td, th{
  border: 1px solid #dddddd;
}

td, th{
  padding: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table id = "table">
</table>

Donde con $.each iteramos sobre el array de objetos.

Con document.createElement originario de JS puro creamos objetos del DOM tal como filas, columnas y celdas de la tabla.

con text() originario de los elementos de jQuery añadimos a un element, texto de contenido.

por ultimo con append() de jQuery añadimos algun elemento de jQuery creado a otro.

Entonces en resumen, primero recorremos todos los objetos del array de objetos con $.each y luego recorremos las propiedades de cada objeto con un ciclo for-in.

2
  • hola bro pero el data lo recibo desde un archivo php que me lo envia en forma json, en eso caso solo paso directamente al .each? igual ya probare a ver
    – Pedro
    Commented el 19 may. 2020 a las 11:47
  • listo ya pude resolver gracias amigo!
    – Pedro
    Commented el 19 may. 2020 a las 14:29
0

lo que pasa es que estas haciendo un JSON parse pero no estas almacenando ese JSON parse, entonces es como si nunca lo hicieras

query.done(function (data) {
    var dataParseado = JSON.parse(data);
    $.each(dataParseado, (index, value) =>{
      console.log(value);
    });
});
1
  • Si!! me di cuenta hace rato, esto era ! gracias!
    – Pedro
    Commented el 19 may. 2020 a las 14:29

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.