Dealing with Javascript objects

Asked

Viewed 120 times

0

For each card registered, I redirect the user to his card view page and I list all the cards he has already registered.

Every card has its nome, then for each card I create the layout and insert the nome. So far so good.

I’m doing it this way:

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

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

["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 each layout should insert its nome. The problem is that it inserts the same name for all, the last that was registered, in this case, the 3 registered cards are with the nome of Itaú.

Does anyone know what it can be?

The layout of the registered card is like this:

<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

  • I believe that if Object.values(nomes) returns an array, so you would need to do Object.values(nomes)[i] to take each of the array values, no?

  • I’ve tried and it doesn’t work. So he fills only the first.

  • The strange thing is that if I put console.log(Object.values(names)[i]); it returns only the first registered name, and the rest comes as Undefined.

  • $('.row').find('span').text(Object.values(nomes[i])); doesn’t work?

2 answers

0


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

I created an excerpt similar to yours, with a solution option. I hope it will be 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>

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

  • Didn’t work :(

  • @Tfm can post the console of the error that is occurring?

  • He doesn’t make any mistakes, he just doesn’t fill anything.

  • Maybe it’s the way I’m adding my layout to each card registered.. I’ll edit the question and show it up there.

  • @Tfm I updated the example according to your code

  • Bah, I don’t even know how to thank you. After an afternoon cracking my head with this, nothing better than seeing kkkk working. Thank you so much!!!

  • 1

    Hehe, always good to help. Just a detail, I edited the example again, more specifically the function cardsCards, to fix a bug and make the selection more reliable by taking Row by id rather than by Children.

Show 2 more comments

0

This you can do in many 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>

  • I didn’t quite understand.

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.