Adding an array to the DOM with each element as an li

Question

I'm trying to add this array to the DOM, with each string element as part of an unordered list. Below I try to set message[i] = the element of the array I want to append to the list, but it doesn't appear to be working. Fetch new is an callback function that gets an array of strings as it's input FYI. Basically I am trying to display each element in that array at the bottom of the ul. ul class="messages" fyi. Is there something wrong with the way I am assigning the variable value?

   function fetchNew() {
        var PrintChat = function (Chat_Messages) {
        var y = Chat_Messages.length;
        for (i = 0; i < y; i++) {

            var message[i] = $('<li>Chat_Messages[i]<li>');
            $('.messages').append(message[i]);

        }
    }

Niet the Dark Absol · Accepted Answer · 2013-04-23 18:39:01Z

1

I'm guessing it's literally outputting Chat_Messages[i] repeatedly?

You kind of have to tell JavaScript that it's a variable to be concatenated. Try this:

$(".messages").append("<li>"+Chat_Messages[i]+"</li>");

Note that for safety reasons you should ensure that the message is properly escaped, or better yet use native DOM methods like createTextNode(Chat_Messages[i]) to protect your site from XSS attacks.

answered Apr 23, 2013 at 18:39

Niet the Dark Absol

326k86 gold badges480 silver badges604 bronze badges

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

Comments

Kenneth · Accepted Answer · 2013-04-23 18:39:40Z

0

if fetchNew is a callback that gets an array of string, you're actually complicating it too much, a simpler method would be like so:

function fetchNew(myArray) {                           // receive the array as a parameter.
    var length = myArray.length;                       // Cache the length of array
    for (i = 0; i < length; i++) {                     // loop through the array.
        var element = $('<li>' + myArray[i] + '<li>'); // concatenate the current value inside an LI and create a dom element.
        $('.messages').append(element);                // Add element to the parent container
    }
}

answered Apr 23, 2013 at 18:39

Kenneth

28.8k7 gold badges65 silver badges85 bronze badges

Collectives™ on Stack Overflow

Adding an array to the DOM with each element as an li

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related