How do I loop through elements and use the index number to present the relative array object properties?

Question

I have created an array object with some dummy properties, I have have also dynamically created some list items that I would like to attach a click handler to. When a list item is clicked I would like to present the appropriate data inside #container using the template Ive set up. Im assuming I can use the index from the for loop of dynamic list items and some how use this to show the correct object properties? If you could advise me where I have gone wrong with this that would be great, sorry but Ive lost my way a little with this.

$(document).ready(function () {

    var data = [

    {
        name: 'kyle',
        age: 23,
        sex: 'male'
    }, {
        name: 'james',
        age: 19,
        sex: 'male'
    }, {
        name: 'catrina',
        age: 28,
        sex: 'female'
    }];

    var template = $('#template').html();

    // Links created dynamically
    for (var i = 0; i < 3; i++) {
        var link = '<li>Link ' + i + '</li>';
        $('#links').append(link);
    }

    // When li is clicked show related data properties, li[0] = data[0], li[1] = data[1] ...
    $('li', '#links').live('click', function (e) {
        $.each(data, function (index, value) {
            $('#container').append(data.name[i], data.age[i], data.sex[i]);
        });

        $('#container').html(data);
    });

});

Code can be found here http://jsbin.com/otirax/6/edit

Answer 1

The easiest thing is to add a data item to each link when you create it that contains the index. You can then fetch that index later upon click:

for(var i = 0; i < 3; i++){
    var link = '<li data-index="' + i + '">Link ' + i + '</li>';
    $('#links').append(link);
}

Then, in your click handler, you can retrieve that value:

$('li', '#links').live('click', function(e){ 
    // retrieve index
    var index = $(this).data("index");
    // retrieve piece of data for this link
    var thisData = data[index];
    // do whatever you need to with the data for this link here
    // thisData.name
    // thisData.age
    // thisData.sex
});

This way of storing and then retrieving the index provides a permanent index value set on each li at the time you create it. If you will never reorder the li tags and they are the only objects at that level, you can simplify it a bit by using the .index() jQuery method that will calculate the index for a given li tag dynamically when needed by just counting how many siblings come before it:

// Links created dynamically
for (var i = 0; i < 3; i++) {
    var link = '<li>Link ' + i + '</li>';
    $('#links').append(link);
}

$('li', '#links').live('click', function(e){ 
    // retrieve index
    var index = $(this).index();
    // retrieve piece of data for this link
    var thisData = data[index];
    // do whatever you need to with the data for this link here
});

---

FYI, .live() has been deprecated and one should use .on() for jQuery 1.7+ or .delegate() for earlier versions of jQuery.

Your .live() code would be this with .on() :

$('#links').on('click', 'li', function(e){ 

Answer 2

This part has two errors:

 $.each(data, function (index, value) {
     $('#container').append(data.name[i], data.age[i], data.sex[i]);
 });

The first one, if you want to access to the data's element via index you should have:

data[index].name

The second one, you don't need that because you already have this array's element in value , so:

$("#container").append(value.name, value.age, value.sex);

However I don't think this is what you want. Even with this fix, your code will add to "#container" ALL the values in data – because that what you're doing. You're saying to the browser "when you click to these element, list all of my data values, and add them to #container".

I think what you really want is something like that:

$('li', '#links').live('click', function(e){ 
    var index = $(this).index(), value = data[index];
    $("#container").append(value.name, value.age, value.sex);
});

Notice that in jQuery you can also add data to an element using data : http://api.jquery.com/data/