Dealing with objects in JavaScript

Question

Dealing with objects in JavaScript

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

For each card registered, I redirect the user to his card viewing page and there ready all the cards he has already registered.

Each card has its nome , so for each card I create layout and enter nome . So far so good.

I'm doing this:

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));
                }

This console.log(Object.values(nomes)); returns the names of the already registered cards:

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

This is where the problem lives:

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

My intention in this code above is that for every% of% created, enter its layout . The problem is that it inserts the same name for everyone, the last one that has been registered, in which case the 3 registered cards are with nome of nome .

Does anyone know what it can be?

The display layout of the registered card is as follows:

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

javascript jquery

asked by anonymous 04.10.2018 / 19:30

2 answers

0

This you can do in several ways, an alternative would be like this.

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>

04.10.2018 / 20:20

VB.NET - How to sort a DataGridView by color How to remove strange character appearing in the page header [duplicate]

score 0 · Accepted Answer

Probably the problem is that you are not indexing the lines of your html, so at each iteration your jQuery code updates the current line and also the rows of all previous iterations with the same value.

I created a snippet similar to yours, with a solution option. I hope it's useful.

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><divclass="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>