How do I loop over my array so that each value in my array is written out in my button element?

Question

I am trying to loop over my array called topics. This array has names of people. Within my loop, i want to grab each name and plug it into a button with its text.

When i console.log my loop, i can see each name in my array get printed. But when i try to append the text of my buttons, it only adds the last name in my array.


var topics = ["Lebron James", "Kevin Durant", "Steph Curry", "James Harden", "Russel Westbrook", "Giannis Antetokounmpo", "Kawhi leonard", "Anthony Davis", "Paul George", "Kyrie Irving"];

for (var i = 0; i < topics.length; i++) {
    $(".gifnames").append("<button type=\"button\" class=\"btn btn-primary\">");
    $("button").text(topics[i]);
    console.log(topics[i]);
}

only Kyrie irvings name is added to all buttons instead of each name being added to the buttons created.

Mamun · Accepted Answer · 2019-05-25 15:47:26Z

2

$("button") matches all the buttons in the document. Thus, in each iteration it reset's all the previously button's text with the current item. Hence, in the final iteration of the loop it replaces all the button's text with the last item of the array.

You have to target the specific button. You can use jQuery's .eq() like the following way:

var topics = ["Lebron James", "Kevin Durant", "Steph Curry", "James Harden", "Russel Westbrook", "Giannis Antetokounmpo", "Kawhi leonard", "Anthony Davis", "Paul George", "Kyrie Irving"];

for (var i = 0; i < topics.length; i++) {
  $(".gifnames").append("<button type=\"button\" class=\"btn btn-primary\">");
  $("button:eq(" + i + ")").text(topics[i]);
  console.log(topics[i]);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="gifnames"></div>

edited May 25, 2019 at 15:47

answered May 25, 2019 at 15:31

Mamun

69k9 gold badges51 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Shidersz · Accepted Answer · 2019-05-25 15:49:13Z

With the next line inside your loop you are changing the text of all the buttons:

$("button").text(topics[i]);

Because the used selector will match all buttons tags available on the document. So, the last iteration of the loop sets the last text of the array to all the buttons. One solution is to first create the button, add the related text to it, and finally append it to the container:

var topics = ["Lebron James", "Kevin Durant", "Steph Curry", "James Harden", "Russel Westbrook", "Giannis Antetokounmpo", "Kawhi leonard", "Anthony Davis", "Paul George", "Kyrie Irving"];

for (var i = 0; i < topics.length; i++)
{
    $('<button type="button" class="btn btn-primary">')
        .text(topics[i])
        .appendTo(".gifnames");
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="gifnames"></div>

sohaieb azaiez · Accepted Answer · 2019-05-25 15:42:30Z

0

what if you change to this ?

for (var i = 0; i < topics.length; i++) {
    var nodes = "<button type='button' class='btn btn-primary'>"+topics[i]+"</button>";
    $(".gifnames").append(nodes);
    //$("button").text(topics[i]);
    console.log(topics[i]);
  }

answered May 25, 2019 at 15:42

sohaieb azaiez

81011 silver badges23 bronze badges

Comments

alireza yazdandoost · Accepted Answer · 2019-05-25 15:45:35Z

0

You can add an attribute to each button, and then select each button by that attribute

var topics = ["Lebron James", "Kevin Durant", "Steph Curry", "James Harden", "Russel Westbrook", "Giannis Antetokounmpo", "Kawhi leonard", "Anthony Davis", "Paul George", "Kyrie Irving"];

for (var i = 0; i < topics.length; i++) {
 $(".gifnames").append("<button type=\"button\" data-id=\""+topics[i]+"\" class=\"btn btn-primary\">");
  $("button[data-id=\""+topics[i]+"\"]").text(topics[i]);
  console.log(topics[i]);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="gifnames"></div>

answered May 25, 2019 at 15:45

alireza yazdandoost

7747 silver badges11 bronze badges

Comments

ecg8 · Accepted Answer · 2019-05-25 17:38:53Z

0

Here is a vanilla JS way to do it.

var topics = ["Lebron James", "Kevin Durant", "Steph Curry", "James Harden", "Russel Westbrook", "Giannis Antetokounmpo", "Kawhi Leonard", "Anthony Davis", "Paul George", "Kyrie Irving"];
var gifnames = document.getElementsByClassName("gifnames")[0];

for (var i = 0; i < topics.length; i++) {
  var b = document.createElement("button");
  b.classList.add("btn", "btn-primary");
  b.name = topics[i];
  b.innerHTML = topics[i];
  gifnames.appendChild(b);
}

.btn-primary {
  background-color: aliceblue
}
.btn {
  display: block
}

<div class="gifnames">
</div>

answered May 25, 2019 at 17:38

ecg8

1,3921 gold badge13 silver badges16 bronze badges

Collectives™ on Stack Overflow

How do I loop over my array so that each value in my array is written out in my button element?

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related