javascript - Return JSON node onclick that matches the text in the link -

the js below returns list of movie titles me after parsing json. each movie title node has more attributes , values not displayed yet. when user clicks movie title in list want return other values in node match title. how go that? thanks.

i have posted data example. js creates html list of movie titles. can see there several nodes of same movie title, different "location." want able click on movie title in list , have display different locations specific movie title in html.

here js fiddle of doing now. jsfiddle

json data:

    fl({   "nodes" : [ {   "node" : {     "title" : "180",     "releaseyear" : "2013",     "director" : "jayendra",     "writer" : "umarji anuradha, jayendra, aarthi sriram, & suba ",     "address" : "\n \n \n 555 market st. \n san francisco, ca\n united states\n \n \n see map: google maps \n \n",     "actor 1" : "siddarth",     "actor 2" : "nithya menon",     "actor 3" : "priya anand",     "latitude" : "37.789952",     "longitude" : "-122.400158"   } }, {   "node" : {     "title" : "180",     "releaseyear" : "2013",     "director" : "jayendra",     "writer" : "umarji anuradha, jayendra, aarthi sriram, & suba ",     "address" : "\n \n \n epic roasthouse (399 embarcadero) \n san francisco, ca\n united states\n \n \n see map: google maps \n \n",     "actor 1" : "siddarth",     "actor 2" : "nithya menon",     "actor 3" : "priya anand",     "latitude" : "37.797677",     "longitude" : "-122.394339"   } }, {   "node" : {     "title" : "180",     "releaseyear" : "2013",     "director" : "jayendra",     "writer" : "umarji anuradha, jayendra, aarthi sriram, & suba ",     "address" : "\n \n \n mason & california streets (nob hill) \n san francisco, ca\n united states\n \n \n see map: google maps \n \n",     "actor 1" : "siddarth",     "actor 2" : "nithya menon",     "actor 3" : "priya anand",     "latitude" : "37.791556",     "longitude" : "-122.410766"   } }   ] }) 

javascript:

    var sort_by = function(field, reverse, primer){     var key = function(x) {return primer ? primer(x[field]) : x[field]};     return function(a,b) {         var = key(a), b = key(b);         return ((a < b) ? -1 : (a > b) ? +1 : 0) * [-1,1][+!!reverse];     } }  $.ajax({     type: 'get',     url: 'list',     async: false,     jsonpcallback: 'fl',     contenttype: 'application/json',     datatype: 'jsonp',     success: function(data) {         var tmp = [];         for(var i=0;i<data.nodes.length;i++) {             tmp.push(data.nodes[i].node);         }         tmp.sort(sort_by('title', true));         var div = document.createelement('div');         $('#film').append(div);         $(div).attr( 'data-role', 'collapsible' );         var heading = tmp[0]['title'][0];         var h3 = document.createelement('h3');         h3.innerhtml = heading;         $(div).append(h3);         h3=null;         var title = '';         for(var i=0;i<tmp.length;i++) {             if(tmp[i]['title'] != title){ title=tmp[i]['title'];                 if(tmp[i]['title'][0] !== heading){                     heading = tmp[i]['title'][0];                     var div = document.createelement('div');                     $('#film').append(div);                     $(div).attr( 'data-role', 'collapsible' );                     var h3 = document.createelement('h3');                     h3.innerhtml = heading;                      $(div).append(h3);                     h3=null;                     var p = document.createelement('p');                     $(div).append(p);                 }                 var film = "<a>"+tmp[i]['title']+"</a> <br />";                 $(p).append(film);                 film=null;                 //$("#sf_film").collapsibleset();                 $("#film").collapsibleset("refresh");             }         }     } });  function fl(json){      console.log(json);    } 

the way have done in past load array of objects json single array objects, , retrieved data using array indices. jsfiddle shows example of fake ajax request loads array, displays links title in displaylinks(), , display more details using showcast(movieid) when click on link. let me know if have questions.

update 1: created updated fiddle merges them title. first fiddle simple assigned data movies, 1 uses additional array called movietitles hold unique movie titles, , uses loop. loop goes through each data element, checks see if .title value exists in movietitles. if exist, use index access movie in movies , there can concatenate other properties want. if doesn't exists (movieindex -1), add movie movies , movie title movietitles. loop till elements in data have been assigned.
example doesn't check different capitalizations (so batman , batman show separately), it's easy , didn't want spoil fun , work :)

once again, let me know if have questions.