After parsing JSON, the JS code below is returning a list of movie titles for me. Each movie title node contains additional attributes and values that are not currently being displayed. My goal is to have the other values in that specific node displayed when the user clicks on the movie title in the list. How can I achieve this? Thank you.
I have provided an example dataset. The JS is generating an HTML list of all the movie titles. Multiple nodes with the same movie title but different "location" values can be observed. I want users to click on a movie title and see all the different locations for that specific movie title displayed in the HTML.
To see the current functionality, here is a JSFiddle link: 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 A = 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;
$("#film").collapsibleset("refresh");
}
}
}
});
function fl(json){
console.log(json);
}