0

Estou tentando criar uma "tabela" com divs com dados recuperados do localStorage dinamicamente.

Consigo recuperar os dados e criar os elementos, porém não da maneira desejada. Os dados estão sendo duplicados dentro da div(que de fato era a unica que deveria repetir).

Meu objetivo é criar uma estrutura assim para cada objeto recuperado do localStorage:

ESTRUTURA ESPERADA PARA CADA OBJETO:

<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>

Estou tentando criar da seguinte forma:

no 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>`);

inserir a descrição da imagem aqui

Estou conseguindo criar a div que quero que repita para cada Objeto, mas não estou sabendo como inserir dados dinamicos dentro dessa div.

1 Resposta 1

2

Como é sua estrutura de clientes? Vou considerar que elas esteja dessa maneira -

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

Nesse caso você só precisa concatenar os dados na string to seu 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>
  `);

});
1
  • Nossa bem simples. Estava pensando em criar id dinamicos para tentar resolver =) Obrigado!
    – felipenoka
    Commented 22/02/2019 às 14:31

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .