javascript: displaying nested arrays in column view

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/

I'm not quite sure what you are trying to achieve. Do you want to retrieve the movies without accessing the data-id field? — georgephillips
– georgephillips, Commented May 5, 2012 at 5:18
@georgephillips see mu is too short's answer below for an idea of what I was trying to achieve. — bento
– bento, Commented May 5, 2012 at 5:48

mu is too short · Accepted Answer · 2012-05-05 05:20:57Z

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.

answered May 5, 2012 at 5:20

mu is too short

436k71 gold badges863 silver badges822 bronze badges

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

2 Comments

bento Over a year ago

A very thorough answer. I had no idea that the .data() attribute existed in jQuery, and that seems to fit my needs perfectly. The second option also seems great too -- again, something I hadn't even considered. Thanks for your help!

mu is too short Over a year ago

@bento: data() is super useful, everyone should know about it :) You can also use data('x') to access the data-x attribute that is already in the HTML.

Collectives™ on Stack Overflow

javascript: displaying nested arrays in column view

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related