Having Issue on Loading Array Items to JS Variable

Question

I need to load items of an array to a varaible as string to use it dynamically in the page

var data = ["Sat 17 Jan", "Wed 14 Jan", "Wed 7 Jan"]
var str;

for (i = 0; i < data.length; i++) { 
    str = '<button class="btn btn-success">'+data[i]+'</button>';
}
console.log(str);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

What I am getting now is only the last button in the console as:

<button class="btn btn-success">Wed 7 Jan</button>

but I need to get

<button class="btn btn-success">Sat 17 Jan</button><button class="btn btn-success">Wed 14 Jan</button><button class="btn btn-success">Wed 7 Jan</button>

void · Accepted Answer · 2016-01-07 23:07:40Z

3

You need to append the every new button to the string and for that use +=.

var data = ["Sat 17 Jan", "Wed 14 Jan", "Wed 7 Jan"]
var str = "";

for (i = 0; i < data.length; i++) { 
    str += '<button class="btn btn-success">'+data[i]+'</button>';
}
console.log(str);

edited Jan 7, 2016 at 23:07

answered Jan 7, 2016 at 22:21

void

36.7k10 gold badges71 silver badges111 bronze badges

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

3 Comments

Behseini Over a year ago

Thanks void this is working but when I try to present the str in the page I am getting undefined at the beginning! Can you please take a look at This Demo to see what is happening?

void Over a year ago

Try this bootply.com/4olbJlLNqm , you need to do var str = "" instead of just var str;

Behseini Over a year ago

Sure I just had to wait for 10 minutes :-)

Taplar · Accepted Answer · 2016-01-07 22:37:57Z

1

var data = ["Sat 17 Jan", "Wed 14 Jan", "Wed 7 Jan"];

console.log($.map(data, function(aDate){
  return '<button class="btn btn-success">'+ aDate +'</button>';
}).join(''));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

answered Jan 7, 2016 at 22:37

Taplar

25k4 gold badges24 silver badges36 bronze badges

Comments

MrOnlineCoder · Accepted Answer · 2016-01-07 22:22:01Z

0

You re-assign str every loop cycle. Try this:

str = str + "your html";

in your for loop

answered Jan 7, 2016 at 22:22

MrOnlineCoder

4205 silver badges17 bronze badges

1 Comment

Zak Over a year ago

Why are you using longhand?? str += "your html" is much simpler

Collectives™ on Stack Overflow

Having Issue on Loading Array Items to JS Variable

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related