Adding a javaScript array to a HTML page?

Question

Im trying to add an array to a webpage. I have tried a few different pieces of code show below but none of them work. I would like the output to be similar to a list like:

text1

text2

text3 ...

The code I have used so far is:

var i;
var test = new Array();
test[0] = "text1";
test[1] = "text2";
test[2] = "text3";

// first attempt
$('#here').html(test.join(' '));

// second attempt
$(document).ready(function() {
    var testList="";
    for (i=0;i<test.length; i++) {
        testList+=  test[i]  + '<br />';
    }
    $('#here').html('testList');
    songList="";
});

I am quite new to javaScript so I am not sure if I have just made a small mistake or if Im doing this in the wrong way. Also, above is a copy of all the code in my javaScript file and some places online are saying I need to import something? Im not sure!
Thanks

Do you get any error messages in the JavaScript console? Are you including the jQuery library? — John Conde
– John Conde, Commented Apr 25, 2012 at 13:03
Not related to the question, but that's a nasty way to create an array. Just use var test = ["text1", "text2", "text3"]; — James M
– James M, Commented Apr 25, 2012 at 13:05

vol7ron · Accepted Answer · 2012-04-25 13:26:54Z

7

Try without quotes:

$('#here').html(testList);

-or-

$('#here').html(test.join('<br />'));

Another approach:

var html = '';                                    // string
$.each(test,function(i,val){                      // loop through array
    var newDiv = $('<div/>').html(val);           // build a div around each value
    html += $('<div>').append(newDiv.clone()).remove().html();   
       // get the html by
       //   1. cloning the object
       //   2. wrapping it
       //   3. getting that html
       //   4. then deleting the wrap
       // courtesy of (http://jquery-howto.blogspot.com/2009/02/how-to-get-full-html-string-including.html)
});

$('#here').html(html);

There might be more code in the latter, but it'll be cleaner in the long run if you want to add IDs, classes, or other attributes. Just stick it in a function and amend the jQuery.

edited Apr 25, 2012 at 13:26

answered Apr 25, 2012 at 13:03

vol7ron

42.3k22 gold badges126 silver badges178 bronze badges

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

Comments

ContextSwitch · Accepted Answer · 2012-04-25 13:04:20Z

4

Try changing the line

$('#here').html('testList')

to

$('#here').html(testList)

answered Apr 25, 2012 at 13:04

ContextSwitch

2,8376 gold badges37 silver badges51 bronze badges

4 Comments

Anthony Grist Over a year ago

@RoryMcCrossan Then SO is being weird, because vol7ron's answer didn't appear for me until just now despite (re)loading the question a number of times.

Rory McCrossan Over a year ago

Look at the answered X mins ago of each answer, vol7ron's increments first. I have noticed some oddities with SOs new update polling though.

vol7ron Over a year ago

Yeah, sorry, I accidentally deleted it - meant to edit it... no worries

Code Maverick Over a year ago

Yes, we get how to read the time. However, his answer wasn't even on the page until a full refresh was done. It didn't bubble up like other new answers.

Jonathan · Accepted Answer · 2012-04-25 13:11:11Z

0

What you have works if you remove the single quotes from testList. However, if you would like an actual unordered list you can do this. (here's a jsFiddle)

var test = new Array();
test[0] = "text1";
test[1] = "text2";
test[2] = "text3";

// first attempt
$('#here').html(test.join(' '));

// second attempt
$(document).ready(function() {
    var testList=$("<ul></ul>");
    for (var i=0;i<test.length; i++) {
        $(testList).append($("<li></li>").text(test[i]));
    }
    $('#here').html(testList);
    songList="";
});

answered Apr 25, 2012 at 13:11

Jonathan

1,9912 gold badges16 silver badges34 bronze badges

Comments

Anthony Grist · Accepted Answer · 2012-04-25 13:04:30Z

0

This line:

$('#here').html('testList');

shouldn't have single quotes around testList - you want to use the content of the variable, not the string literal "testList".

answered Apr 25, 2012 at 13:04

Anthony Grist

38.4k8 gold badges64 silver badges76 bronze badges

Comments

gabitzish · Accepted Answer · 2012-04-25 13:04:54Z

0

Don't pass the variable as a string : $('#here').html('testList'); Pass it without quotes : $('#here').html(testList);

answered Apr 25, 2012 at 13:04

gabitzish

9,7117 gold badges47 silver badges67 bronze badges

Comments

jfriend00 · Accepted Answer · 2012-04-25 13:06:29Z

0

Here's the simplest version:

$(document).ready(function() {
    var test = ["text1", "text2", "text3"];
    $('#here').html(test.join("<br>"));
});

answered Apr 25, 2012 at 13:06

jfriend00

711k104 gold badges1.1k silver badges1k bronze badges

Collectives™ on Stack Overflow

Adding a javaScript array to a HTML page?

6 Answers 6

Comments

4 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

4 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related