2

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.

captura json

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+'&euro;</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"}]
2
  • 1
    Disculpa, ¿no podrías agregar un ejemplo del json que obtienes con ajax? Commented el 19 sept. 2019 a las 19:17
  • @the-breaker cómo no. Lo pongo. Gracias por el apunte.
    – rafa_pe
    Commented el 19 sept. 2019 a las 21:18

1 respuesta 1

1

Lo puedes hacer cambiando el código en onSuccess:

Se crear 3 variables, una para guardar el HTML final que se insertará, una para guardar las categorías y la ultima para guardar el HTML generado para cada elemento del json según su categoría.

var contenido='<ul>';
var items = {};
var cats = [];

Luego al recorrer el json verificas que si el tipo del elemento aun no esta en el array de categorías:

if(!cats.includes(val.tipo)){

De ser así lo insertas e inicializas la lista de items de la categoría:

cats.push(val.tipo);
items[val.tipo]='';

Agregas el item a la lista con:

items[val.tipo]+=`<li>${val.nombre}</li>`;   

Por ultimo recorres el array de categorías añadiendo el contenido de cada lista para mostrarlo:

cats.map(e => contenido+=`<li>${e.substr(0,1).toUpperCase()+e.substr(1)}</li><ul>${items[e]}</ul>`)
$('#posts').html(contenido+'</ul>');

Este código añade letra capital al nombre de la categoría. En lugar de usar <ul> y <li> puedes emplear otras etiquetas para mostrar los elementos.

Este es un ejemplo de como funcionaria:

var data=JSON.parse('[{"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"}]');

function mostrar() {
    var contenido='<ul>';
    var items = {};
    var cats = [];
    $.each(data, function(key, val){
      if(!cats.includes(val.tipo)){
        cats.push(val.tipo);
        items[val.tipo]='';
      }
      items[val.tipo]+=`<li>${val.nombre}</li>`;   
    });
    cats.map(e => contenido+=`<li>${e.substr(0,1).toUpperCase()+e.substr(1)}</li><ul>${items[e]}</ul>`)
    $('#posts').html(contenido+'</ul>');
}

mostrar();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div data-role="content" id="posts"></div>

y el código al final te queda de esta forma:

$(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 = [];
    var contenido='<ul>';
    var items = {};
    var cats = [];
    $.each(data, function(key, val){
      if(!cats.includes(val.tipo)){
        cats.push(val.tipo);
        items[val.tipo]='';
      }
      items[val.tipo]+=`<li>${val.nombre}</li>`;   
    });
    cats.map(e => contenido+=`<li>${e.substr(0,1).toUpperCase()+e.substr(1)}</li><ul>${items[e]}</ul>`)
    $('#posts').html(contenido+'</ul>');
  }
},
  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 así ya se muestra como esperas, saludos.

2
  • 1
    brillante. Y además sencillo y lógico. Thanks!
    – rafa_pe
    Commented el 20 sept. 2019 a las 9:43
  • 1
    @rafa_pe de nada, para eso estamos. Commented el 20 sept. 2019 a las 10:07

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.