Question

Just a quick short example of what I’m trying to do:

Salamander = {
    Name: getName(),
    SvLength: getSvLength(),
    TotLength: getTotLength()
};

aSal.push(Salamander);

What would be the best way to display a variable number of Salamanders’ data on the screen? There can be an indiscriminate number of them in the array.

What would the HTML markup even look like for something like this? And how would I script it to be filled by the data?

Answer 1

You need to create the HTML dynamically if you don’t know the number of elements or anything else for that matter.

Do something like this, how you do your markup us up to you, but you get the point:

var output;

$.each(aSal, function(index, item) {
    output += '<ul class="salamander_wrapper">';
    output += '<li class="name">'+this.Name+'</li>';
    output += '<li class="length">'+this.SvLength+'</li>';
    output += '<li class="tot_length">'+this.TotLength+'</li>';
    output += '</ul>';
});

$(output).appendTo('body');

FIDDLE