I have a JSON file containing information about movies currently playing in theaters. I want to display specific details for each movie when its title is clicked, but my code isn't functioning properly. Currently, all the movies' information is displayed regardless of which title is clicked.
My goal is to be able to click on a movie title, such as "Ender's Game," and have only that film's information appear in a designated div. Below is the JavaScript code I am using:
$(document).ready(function() {
$.getJSON('json/store.json', function(results) {
//Get movie titles
for (var i = 0; i < results['results'].length; i++) {
var title = '<p><a href="#" class="title" data-movie-id="'+i+'">' + results['results'][i].title + '</a></p>';
$('#movies').append(title);
}
//Display movie info on click
$('.title').click(function(){
var index = $(this).attr('data-movie-id');
$('#info').empty().append("<p class='biohus'>" + results['results'][index].title + "</p>");
$('#info').append("<img id='myndbio' width='200' height='300' class='img' src =" + results['results'][index].image + ">");
$('#info').slideToggle("slow");
});
});
Below is the HTML code structure:
<div id="bio" class = "content">
<center><h1 class="cinemaheadline">Movies in Theater</h1></center>
<div id="movies" class="movies">
<!-- Movie Titles -->
</div>
<div id="info" class="info">
<!-- Movie Information -->
</div>
</div>
The PHP code used to connect to the API is as follows:
<?php
//check if curl extension is loaded
if(!function_exists("curl_init")) die("cURL extension is not installed");
//API URL
$url = 'http://apis.is/cinema';
$storejson = 'json/store.json';
//write the JSON response to a local file
$fw = fopen($storejson, 'w');
$ch=curl_init($url); //initialize curl
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); //set options
$r=curl_exec($ch); //execute
curl_close($ch); //close curl
$arr = json_decode($r,true); //decode JSON
fwrite($fw, json_encode($arr, TRUE)); //write to file
?>