0

Para cada cartão cadastrado, eu redireciono o usuário para a página de visualização de cartões dele e ali listo todos os cartões que ele já cadastrou.

Cada cartão tem seu nome, então para cada cartão eu crio o layout e insiro o nome. Até aí tudo bem.

Estou fazendo da seguinte maneira:

tx.executeSql('SELECT empresa FROM cartoes', [], function(tx, results){
                for (var i=0; i<results.rows.length; i++) {
                    var nomes = results.rows.item(i);

                    cartoesCadastrados(); //essa função cria o layout

                    console.log(Object.values(nomes));

                    $('.row').find('span').text(Object.values(nomes));
                }

Esse console.log(Object.values(nomes)); me retorna os nomes dos cartões já cadastrados:

["Ebcard"]
["Claro"]
["Itaú"]

Aqui é onde mora o problema:

$('.row').find('span').text(Object.values(nomes)); 

Minha intenção nesse código acima é que para cada layout criado, inserisse o seu respectivo nome. O problema é que ele insere o mesmo nome para todos, o último que foi cadastrado, nesse caso, os 3 cartões cadastrados estão com o nome de Itaú.

Alguém sabe o que pode ser?

O layout de visualização do cartão cadastrado está assim:

<html>
    <div class="container">
                <div class="row">
                    <!-- onde vai plotar o template -->
                    <div id="container"></div>
                </div>
            </div>

            <template>
                <div class="row" id="corpo-cartoes">
                    <div class="col s12 m7" style="width: 100%;">
                        <div class="card">
                            <div class="card-image">
                                <img src="img/apresentacao.jpg">
                                <span class="card-title">Card Title</span>
                            </div>
                            <div class="card-action icone-meu-cartao">
                                <a href="#" ><i class="material-icons">code</i></a>

                                <a href="#"><i class="material-icons">crop_free</i></a>
                                <a href="#"><i class="material-icons">visibility</i></a>
                                <a href="#"><i class="material-icons btn-editar">edit</i></a>
                            </div>
                        </div>
                    </div>
                </div>
            </template> 
</html>

<script>
    function cartoesCadastrados() {
        var content = document.querySelector('template').content;
        document.querySelector('#container').appendChild(
        document.importNode(content, true));
    }
</script>
4
  • Creio que se Object.values(nomes) te retorna um array, então você precisaria fazer Object.values(nomes)[i] para pegar cada um dos valores da array, não? 4/10/2018 às 17:54
  • Já tentei e não funciona. Assim ele preenche só o primeiro.
    – user125347
    4/10/2018 às 17:56
  • O estranho é que se eu coloco console.log(Object.values(nomes)[i]); ele me retorna só o primeiro nome cadastrado, e o resto vem como undefined.
    – user125347
    4/10/2018 às 18:15
  • $('.row').find('span').text(Object.values(nomes[i])); não funciona?
    – Jorge.M
    4/10/2018 às 19:28

2 Respostas 2

0

Provavelmente o problema é que você não está indexando as linhas do seu html, então a cada iteração o seu código jQuery atualiza a linha atual e também as linhas de todas as iterações anteriores com o mesmo valor.

Criei um trecho semelhante ao seu, com uma opção de solução. Espero que seja útil.

function cartoesCadastrados(idx) {
    var clone = document.importNode(document.querySelector('template').content, true);

    clone.querySelector("#corpo-cartoes")
      .classList.add(idx);

    document.querySelector('#container')
      .appendChild(clone);
}

var results = {
  rows: [ "Bradesco", "Itaú", "Banco do Brasil", "Caixa" ]
}

for (var i=0; i<=3; i++) {
    var nomes = results.rows[i];       

    var idx = "item" + (i + 1);

    cartoesCadastrados(idx); //essa função cria o layout 

    $("." + idx).find('span').text(nomes);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container">
  <div class="row">
      <!-- onde vai plotar o template -->
      <div id="container"></div>
  </div>
</div>

<template>
    <div class="row" id="corpo-cartoes">
        <div class="col s12 m7" style="width: 100%;">
            <div class="card">
                <div class="card-image">
                    <img src="img/apresentacao.jpg">
                    <span class="card-title">Card Title</span>
                </div>
                <div class="card-action icone-meu-cartao">
                    <a href="#" ><i class="material-icons">code</i></a>

                    <a href="#"><i class="material-icons">crop_free</i></a>
                    <a href="#"><i class="material-icons">visibility</i></a>
                    <a href="#"><i class="material-icons btn-editar">edit</i></a>
                </div>
            </div>
        </div>
    </div>
</template>

7
  • Não funcionou :(
    – user125347
    4/10/2018 às 18:43
  • @Tfm consegue postar o console do erro que está ocorrendo? 4/10/2018 às 18:46
  • Ele não da erro nenhum, só não preenche nada.
    – user125347
    4/10/2018 às 18:49
  • Talvez seja a maneira que estou adicionando meu layout para cada cartão cadastrado.. Vou editar a pergunta e mostrar ali em cima.
    – user125347
    4/10/2018 às 19:03
  • 1
    Hehe, sempre bom poder ajudar. Só um detalhe, editei o exemplo novamente, mais especificamente a função cartoesCadastrados, para corrigir um bug e tornar a seleção mais confiável, pegando a row por id ao invés de pegar pelo children. 4/10/2018 às 20:17
0

Isso você pode fazer de varias maneiras, uma alternativa seria assim.

const array = ['itau', 'bradesco', 'santander', 'banco do brasil']


array.map(banco => {
  let querySelector = document.getElementById('list')
  
  querySelector.innerHTML += `<li>${banco}</li>`
})
<ul id="list"></ul>

1
  • Não compreendi muito bem.
    – user125347
    4/10/2018 às 19:17

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