Home / Questions / 152111
Accepted
Piero Pajares
Asked: 2020-04-02 12:19:09 +0800 CST 2020-04-02 12:19:09 +0800 CST

Get arrangement of different sizes

  • 772

I have the following json:

[
{
 "cliente": "Milagros",
 "descripcion": "Sin ensalada",
 "detalleventa": [
   {"cantidad": 2, "producto": "Super D'Nicos"}, 
   {"cantidad": 1, "producto": "Cl\u00e1sica"},
   {"cantidad": 1, "producto": "Chicha morada"}
  ],
 "atendido": false
 },
 {
 "cliente": "Nicolas",
 "descripcion": "Todas las cremas",
 "detalleventa": [
   {"cantidad": 2, "producto": "Agregado Pollo"}, 
   {"cantidad": 1, "producto": "Hot dog frankfurt simple"}
 ],
 "atendido": false
 },
 {
  "cliente": "Hamilton",
  "descripcion": "Todas las cremas",
  "detalleventa": [
    {"cantidad": 2, "producto": "Super D'Nicos"},
    {"cantidad": 1, "producto": "Chicha morada"}
  ],
  "atendido": false
  }
]

In which through ajax I am getting it:

var json = $.parseJSON($.ajax({
                    url:  "{%  url 'api-pedido' %}",
                    dataType: "json",
                    async: false
                }).responseText);

So what I want to achieve is that from that data I can paint some bootsrap cards in my html. So far I already get the number of cards depending on the size of the arrangement, the name of the client and the description but I have problems with the saledetail since it is an array and in each saledetail its size is different and I don't know how to recover and put them in their respective li, so far I managed to do this:

for (let pedidos of json) {
                for(let detalle of pedidos.detalleventa){
                $('.container').append("<div class='col-xs-auto spaceCard'><div class='card'><h5 class='card-header'>" + pedidos.cliente +"</h5><div class='card-body'><h5 class='card-title'><span class='colorDnicos'>Descripción: </span>" + pedidos.descripcion + "</h5><div class='card-text'><ul><li>"+detalle.cantidad+ " " + detalle.producto +"</li></ul></div><a href='#' class='btn btn-primary btn-block'><span class='fa fa-check'></span>Atendido</a></div</div></div>");
                }
            }

But instead of putting the saledetail array on each card, you are creating 1 card for each detail:

Miracles has 3 products

javascript

1 Answers

  1. Best Answer

    The iterations you are doing are correct, but the problem is how you build the string that you then add in your container.

    On the one hand you add the title and description. Then in the other foryou add each element of the list.

    You should separate it as follows the content

    for (let pedidos of json) {
  let content = "<div class='col-xs-auto spaceCard'><div class='card'><h5 class='card-header'>" + pedidos.cliente +"</h5><div class='card-body'><h5 class='card-title'><span class='colorDnicos'>Descripción: </span>" + pedidos.descripcion + "</h5><div class='card-text'><ul>"

  for(let detalle of pedidos.detalleventa){
    content += "<li>"+detalle.cantidad+ " " + detalle.producto +"</li>";
  }

  content += "</ul></div><a href='#' class='btn btn-primary btn-block'><span class='fa fa-check'></span>Atendido</a></div</div></div>";

  $('.container').append(content);
}

    you can see your example working here

    Cheers

    • 1