Question

I’m attempting to create a simple column view which will allow me to explore nested arrays. The goal is to have a user click on a ‘name’ in the ‘name’ column, and have the corresponding movies list appear in the next column. For example, I’d provide a JSON array like this:

var array = [
    {
        "name":"sean connery",
        "index":0,
        "movies": [
            {"name": "Goldfinger",
             "id": 43},
            {"name":"Thunderball",
             "id":103}
            ]
    },{
      "name":"pierce brosnan",
        "index":1,
        "movies": [
            {"name": "Goldeneye",
             "id": 22},
            {"name":"The world is not enough",
             "id":100}
            ]  

    }
    ] 

And basically, I’m kinda cheating in order to retrieve the movies array for the corresponding name. I read the ‘index’ attribute that is appended to the li element, and use that to pick out the appropriate index to retrieve the movies array.

// sorts alphabetically 
array.sort(function(a, b) {
    return b.name < a.name ? 1 : b.name > a.name ? -1 : 0;
});

$.each(array, function(index, value){
   listitem = document.createElement('li');
$(listitem).html(value.name).appendTo($("ul#list")).attr("data-id",value.index);        
});

//make it a scrollbox
$("ul#list").scrollTop(); 

//click to display movies
$("ul#list li").click(function(){
 var id = $(this).attr("data-id"); 
movies = array[id].movies;
    console.log(movies); 
});​

But this doesn’t seem like the ideal method here. It seems like there should be a way to retrieve the appropriate movies array without needing to alter the DOM. Any suggestions? Or am what I’m doing a legit way?

Thanks! and a Fiddle containing my code: http://jsfiddle.net/bmcmahen/WXvWv/2/

Answer 1

You could go even further and attach the whole movie array to the <li> using data:

$.each(array, function(index, value) {
    var $li = $('<li>').html(value.name).data('movie', value.movies);
    $('ul#list').append($li);
});

$("ul#list li").click(function() {
    console.log($(this).data('movie'));
});​

Demo: http://jsfiddle.net/ambiguous/Ug43b/

Or, if that doesn’t make sense in your situation you can use index to figure out where the <li> is inside the <ul> and use that to index into the array:

$.each(array, function(index, value) {
    var $li = $('<li>').html(value.name)
    $('ul#list').append($li);
});

$("ul#list li").click(function() {
    var i = $('ul#list li').index(this);
    console.log(array[i].movies);
});​

You could also cache $('ul#list li') if you wanted:

var $lis = $('ul#list li');
$lis.click(function() {
    var i = $lis.index(this);
    console.log(array[i].movies);
});

Demo: http://jsfiddle.net/ambiguous/kbvGf/

Which way you go depends on your specific situation of course. The index approach does require your <ul> to exactly match array and that could be a problem, using a data-attribute nicely sidesteps this problem by binding each <li> directly to a set of movies either directly through data-movies or indirectly through the index in data-id.