Dynamic divs with local dataStorage - Jquery

Question

I am trying to create a "table" with Divs with dynamically retrieved data from localStorage.

I can recover the data and create the elements, but not in the desired way. The data is being duplicated inside the div (which in fact was the only one that should repeat).

My goal is to create a structure like this for each object recovered from localStorage:

EXPECTED STRUCTURE FOR EACH OBJECT:

<div class="row align-items-center w-100" id="cadastroCliente">
  <div> <!--DIV QUE TEM QUE REPETIR PARA CADA OBJETO-->
    <div class="col-lg-3">
      <div class="col">Nome</div>
      <div class="col">Email</div>
    </div>
    <div class="col-lg-3">
      <div class="col" style=>CPF</div>
      <div class="col" style=>TEL</div>
    </div>
    <div class="col-lg-3">
      <div class="col">Status</div>
    </div>
    <div class="col-lg-3">
      <button type="button" class="btnCustom float-r mr-3">Editar</button>
    </div>
  </div>
</div>

I’m trying to create it this way:

in HTML:

<div class="row" id="listaClientes"></div>

JS:

//FUNCTION PARA CRIAR A DIV DE FORMA DINAMICA

function listaCliente(clientes = Array(), filter = false) {
  if(clientes.length == 0 && filter == false) {
    clientes = bd.recuperarClientes()
  }

  let listaCliente = document.getElementById('listaClientes')


  clientes.forEach(function(d) {

    $('#listaClientes').append(`<div class="col-lg-3 divCustom"></div>`);

I’m managing to create the div I want you to repeat for each Object, but I’m not sure how to insert dynamic data into this div.

Answer 1

What is your customer structure like? I will consider that they are like this -

const clientes = [{
    "name": "Yuri Moura",
    "cpf": "123.456.789-00",
    "status": "Ativo",
    "contact": {
        "email": "[email protected]",
        "tel": "[phone]"
    }
}, {
    "name": "Felipe Noka",
    "cpf": "987.654.321-00",
    "status": "Desativado",
    "contact": {
        "email": "[email protected]",
        "tel": "(88) 8888-8888"
    }
}]

In this case you only need to concatenate the data in the string to your HTML.

clientes.forEach(function(d) {

  $('#listaClientes').append(`
    <div class="row align-items-center w-100">
      <div>
        <div class="col-lg-3">
          <div class="col">${d.name}</div>
          <div class="col">${d.contact.email}</div>
        </div>
        <div class="col-lg-3">
          <div class="col" style="">${d.cpf}</div>
          <div class="col" style="">${d.contact.tel}</div>
        </div>
        <div class="col-lg-3">
          <div class="col">${d.status}</div>
        </div>
        <div class="col-lg-3">
          <button type="button" class="btnCustom float-r mr-3">Editar</button>
        </div>
      </div>
    </div>
  `);

});