Question

102

Create a < ul> and fill it based on a passed array

rated 0 times [ 105] [ 3] / answers: 1 / hits: 136622 / 12 Years ago, wed, june 20, 2012, 12:00:00

I've managed to generate a series of list-items based on one specified array within a matrix (i.e. an array within an array).

I would like to be able to pass a variable (representing an array) to a function so that it can spit out an unordered list filled with list-items based on the array passed into it.

Problems:

The function only works with one array at a time

It also produces commas in the markup (presumably, because it's converting the array to a string)

The solution needs to:

assume that the unordered list does not exist in the DOM

be able to accept different arrays passed into it (options[0], options[1], etc.)

generate the list-items without commas

JavaScript:

var options = [

        set0 = ['Option 1','Option 2'],

        set1 = ['First Option','Second Option','Third Option']

    ]



function makeUL(){

    var a = '<ul>',

        b = '</ul>',

        m = [];



    // Right now, this loop only works with one

    // explicitly specified array (options[0] aka 'set0')

    for (i = 0; i < options[0].length; i += 1){

        m[i] = '<li>' + options[0][i] + '</li>';

    }



    document.getElementById('foo').innerHTML = a + m + b;

}



// My goal is to be able to pass a variable

// here to utilize this function with different arrays

makeUL();

jsFiddle

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

hailey

Add To Favorites

Follow

Total Points: 355

Total Questions: 91

Total Answers: 91

Location: India

Member since Wed, Aug 4, 2021

3 Years ago

answered 12 Years ago dayshadelaniej · Accepted Answer

First of all, don't create HTML elements by string concatenation. Use DOM manipulation. It's faster, cleaner, and less error-prone. This alone solves one of your problems. Then, just let it accept any array as an argument:

var options = [

        set0 = ['Option 1','Option 2'],

        set1 = ['First Option','Second Option','Third Option']

    ];



function makeUL(array) {

    // Create the list element:

    var list = document.createElement('ul');



    for (var i = 0; i < array.length; i++) {

        // Create the list item:

        var item = document.createElement('li');



        // Set its contents:

        item.appendChild(document.createTextNode(array[i]));



        // Add it to the list:

        list.appendChild(item);

    }



    // Finally, return the constructed list:

    return list;

}



// Add the contents of options[0] to #foo:

document.getElementById('foo').appendChild(makeUL(options[0]));

Here's a demo. You might also want to note that set0 and set1 are leaking into the global scope; if you meant to create a sort of associative array, you should use an object:

var options = {

    set0: ['Option 1', 'Option 2'],

    set1: ['First Option', 'Second Option', 'Third Option']

};

And access them like so:

makeUL(options.set0);