So I’m learning javascript and I’m trying to create a movie database where a user enters a movie id in a textbox and clicks the “load a movie button” which loads information about the movie with that specific id.
I was given a json file which contains elements of a movie such as the id, a title, release date, etc. I’m having trouble adding a click handler to my movie request button that creates an XMLHttpRequest object and submits a “GET” request for a specific movie. If this request is successful, the response text available in my callback function will be a JSON string containing the movie’s information in the format below. So in the console it would print out:
{
"Title": "Guardians of the Galaxy Vol. 2",
"Year": "2017",
"Rated": "PG-13",
Released: "05 May 2017"
"Runtime":"136 min",
"imdbID":"tt3896198",
"Response":"True"
}
and it should just print the title and runtime as regular text in the loaded html page as that’s what I’m requesting in the javascript file.
This json file only contains 1 movie for simplicity, but my original json file will contain information for thousands of movies, so when I’m searching a specific movie id, it should only load information for the one movie instead of all the movies in the json file. So if I enter “tt3896198” in the textbox, this id should load the data for the movie “Guardians of the Galaxy Vol. 2” as this is the id that matches this movie, as shown in the json file.
I tried looking up how to print specific information from the json file using XMLHttpRequests and JSON parsing but the problem is the examples I see online are able to access the variables in their json file by doing something like “movie.title” because their variables are lowercase. All my variables in my JSON file appear to be uppercase, and I don’t think doing movie.Title is allowed.
Additionally, I was wondering how I would load a movie based on what id the user enters? There are 1000s of movies with unique ids, and I’m not sure how to load only one movie whose id matches the id entered in the textbox.
Right now my page just shows a textbox and a button, but the button doesn’t work. Any help would be appreciated, I’m having trouble mostly with just getting the data from the json file to show up on the console as well as the HTML page when I click the button. If anyone could help or provide resources in getting the movie id element to work, that’d be appreciated too!!
movie.html:
<html>
<head>
<title>Movies page</title>
</head>
<body onload="init()">
<div>
<input type="text" placeholder="Search" name="textbox">
<button type="button" id="retrieveMovies">Load a movie</button>
</div>
<br />
<div id="moviediv">
</div>
<script src="movies.js"></script>
</body>
</html>
movie.js:
let movies = [];
function init(){
document.getElementById("retrieveMovies").onclick = loadMovies;
loadMovies();
}
function loadMovies(){
let xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
let responseObject = JSON.parse(xhttp.responseText);
movies = responseObject.results;
render();
}
};
xhttp.open("GET", "movie.json", true);
xhttp.send();
}
function render(){
let content = "";
movies.forEach(movie =>{
content += `
<div>
<p> Movie: ${movie.Title}</p>
<br/>
<p> Runtime: ${movie.Runtime}</p>
</div>
`
})
document.getElementById("moviediv").innerHTML = content;
}
movie.json:
{"Title":"Guardians of the Galaxy Vol. 2","Year":"2017","Rated":"PG-13","Released":"05 May 2017","Runtime":"136 min","imdbID":"tt3896198","Response":"True"}