Necesito listar los productos separador por categorías. Tengo un script REST que actualmente me lista dichos productos todos a la vez, pero necesito mostrarlos tal como se ve en la captura de pantalla adjunta. Los recupero en formato JSON, la FK que determina la categoría es "tipo"(string) y la id es "id_producto".
No sé cómo manejar el each
para este cometido.
El código es este
$(document).ready(function() {
app.readPosts();
$(document).bind('deviceready', app.onDeviceReady);
});
var app = {
posts_url: "http://www.web.com/json/lista.json.php",
onDeviceReady: function() {
console.log('Device is ready');
app.readPosts();
},
readPosts: function() {
console.log('Reading posts');
$.ajax({
type: "GET",
dataType: "json",
url: app.posts_url,
success: app.onSuccess,
error: app.onError
});
console.log('Reading posts asynchrounously');
},
onSuccess: function(data) {
var items = [];
$.each(data, function(key, val){
items.push('<div id="card-525495'+val.id_producto+'"><div class="card"><div class="card-header graph"><div class="row"><div class="col-8"><a class="card-link" data-toggle="collapse" data-parent="#card-525495'+val.id_producto+'" href="#card-element-557833'+val.id_producto+'"><div class="diplinline">'+val.tipo+' - '+val.nombre+'</div></a></div><div class="col-4"><div class="row"><div class="col-8"><div class="diplinline text-right">'+val.precio+'€</div></div><div class="col-4"><div class="upper" id="'+val.id_producto+'"><h5><span class="badge badge-success">+</span></h5><span class="name" style="display:none">'+val.nombre+'</span>><span class="price" style="display:none">'+val.precio+'</span></div></div></div></div></div></div><div id="card-element-557833'+val.id_producto+'" class="collapse"><div class="card-body"><h4>'+val.tipo+' - '+val.nombre+'</h4><p>'+val.ingredientes+'</p><img src="img/'+val.imagen+'" class="items" height="100" alt="" />'+val.precio+'<p>'+val.ingredientes+'</p></div></div></div></div>');
});
$('#posts').html(items.join(''));
}
},
onError: function(data, textStatus, errorThrown) {
console.log('Data: ' + data);
console.log('Status: ' + textStatus);
console.log('Error: ' + errorThrown);
$("#posts").html('No hay tareas pendientes');
console.log('Exiting onError');
},
};
y la salida la muestro con esto:
<div data-role="content" id="posts"></div>
este es el JSON resultante.
[{"id_producto":"1","nombre":"Cool T-shirt","imagen":"tshirt-1.jpg","ingredientes":"Cool T-shirt, Cotton Fabric. Wash in normal water with mild detergent.","precio":"8.50","tipo":"pizzas"},{"id_producto":"2","nombre":"HBD T-Shirt","imagen":"tshirt-2.jpg","ingredientes":"Cool Happy Birthday printed T-shirt.Crafted from light, breathable cotton.","precio":"7.40","tipo":"pizzas"},{"id_producto":"3","nombre":"Survival of Fittest","imagen":"tshirt-3.jpg","ingredientes":"Yellow t-shirt makes the perfect addition to your casual wardrobe.","precio":"9.50","tipo":"pizzas"},{"id_producto":"4","nombre":"Love Hate T-shirt","imagen":"tshirt-4.jpg","ingredientes":"Stylish and trendy, this crew neck short sleeved t-shirt is made with 100% pure cotton.","precio":"10.80","tipo":"bocadillos"}]