How can I give a different class for each header in a loop

Question

I've been trying to make a HTML page where each box represents 1 item that has been ordered. Here's the HTML for the box:


       28/09/2021
        16:00
      

      
        
        
      
      
        
      
      
       Fruta > Tropical > Manga > Tommy

And this is how I'm treating the data to feed it:

fetch('http://---.--.14.--:--/pedidos/', {
  method: 'GET',
  headers: {
    'Authorization': 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6NCwiaWF------yNTkwLCJleHAiOjE2MzM3Nzg5OTB9.XwrGFhLiGJ0YS5FHjn7Xo',
    'Content-type': 'application/json'
  }

})
  .then(function (response) {
    return response.json();


  })
  .then(function (jsonResponse) {
    // console.log(jsonResponse);
    var DadosPedidos = jsonResponse;
    pedidosArray = jsonResponse.length;








    for (let pedidos of DadosPedidos) {
      let a = 0;
      for (let i = 0; i < pedidos.items.length; i++) {

        let pedidosLength = pedidos.items.length;
        let lengthPedidos = pedidos.nroPedCliente;
       




        var boxClonado = $("#boxMaster").clone(true);
        $(boxClonado).appendTo("#preparando").removeAttr("hidden", "style").removeAttr("id").addClass(`${pedidos.id}-${pedidos.items[i].codItem}`);

        $(".nmroPedido").addClass(`${pedidos.items[i].codItem}`);



        let nomeClasses = `${pedidos.id}-${pedidos.items[i].codItem}`;
        let h3quantidade = `${pedidos.id}-${pedidos.items[i].codItem}`;









        $("." + nomeClasses).append(`${pedidos.items[i].codItem}`);
        $("." + h3quantidade).append(`${pedidos.items[i].qtdPedida}`);
        //$("." + headerPedido).append(`Nº do Pedido: ${pedidos.nroPedido}`);



        let data = new Date((pedidos.dataEntrega).substring(0, 10));
        let dataEnt = ((data.getDate())) + "/" + ((data.getMonth() + 1)) + "/" + data.getFullYear();
        



      }
    }

As you can see, I managed to give a unique class to each box (that represent 1 item) at the end of the line:

$(boxClonado).appendTo("#preparando").removeAttr("hidden", "style").removeAttr("id").addClass(`${pedidos.id}-${pedidos.items[i].codItem}`);

And also managed to do it for the quantities as well. The point is, I'm not being able to do it with the there is. Therefore, I can't set individual "nroPedido" for the box header.

Here's the array I'm getting from the fetch, in case that helps: https://imgur.com/a/c10ER4X

What am I missing? How can I make it work?

user_12094283 · Answer

This should do it. Just as example. You have a nested Object and you have to iterate through it with two each loops. Then you can append different unique id's. Then it's easy to create the correct HTML by JSON.

var arr = [{
    "id": "0001",
    "type": "donut",
    "name": "Cake",
    "ppu": 0.55,
    "batters": {
      "batter": [{
          "id": "1001",
          "type": "Regular"
        },
        {
          "id": "1002",
          "type": "Chocolate"
        },
        {
          "id": "1003",
          "type": "Blueberry"
        },
        {
          "id": "1004",
          "type": "Devil's Food"
        }
      ]
    }
  },
  {
    "id": "0002",
    "type": "donut",
    "name": "Raised",
    "ppu": 0.55,
    "batters": {
      "batter": [{
        "id": "1001",
        "type": "Regular"
      }]
    },

  },
  {
    "id": "0003",
    "type": "donut",
    "name": "Old Fashioned",
    "ppu": 0.55,
    "batters": {
      "batter": [{
          "id": "1001",
          "type": "Regular"
        },
        {
          "id": "1002",
          "type": "Chocolate"
        }
      ]
    }
  }
]

//console.log(arr);

var markup = '';

$.each(arr, function(key, value) {
  key = key + 1;
  markup += ' ' + value.id + ''
  $.each(value.batters.batter, function(key, v) {
    //console.log('id', v.id);
    markup += ' ' + v.type + '';
  });
});
$('#boxMaster').append(markup);
//console.log(markup);

How can I give a different class for each header in a loop

1 Answers