My code only works for the "bands" button, but the places and movies does not work. It is AJAX reading JSON.

Link to the page: https://lisabalbach.com/vanwetm/CIT190/lesson7/JsonTopFive.html

HTML code:

Bands Places Movies

My Top 5

JS Code:

document.getElementById("bands").addEventListener("click", function () { var xhr = new XMLHttpRequest(); // Create XMLHttpRequest object xhr.onload = function () { if (xhr.status === 200) { responseObject = JSON.parse(xhr.responseText); array = responseObject.bands; processItem(array); } }; xhr.open('GET', 'bands.json', true); // Prepare the request xhr.send(null); // Send the request });

document.getElementById("movies").addEventListener("click", function () { var xhr = new XMLHttpRequest(); // Create XMLHttpRequest object xhr.onload = function () { if (xhr.status === 200) { responseObject = JSON.parse(xhr.responseText); array = responseObject.movies; processItem(array); } }; xhr.open('GET', 'movies.json', true); // Prepare the request xhr.send(null); // Send the request }); document.getElementById("places").addEventListener("click", function () { var xhr = new XMLHttpRequest(); // Create XMLHttpRequest object xhr.onload = function () { if (xhr.status === 200) { responseObject = JSON.parse(xhr.responseText); array = responseObject.places; processItem(array); } }; xhr.open('GET', 'places.json', true); // Prepare the request xhr.send(null); // Send the request }); function processItem(array) { var newContent = ''; for (var i = 0; i < array.length; i++) { // Loop through object newContent += '

Name: ' + array[i].Name + ' '; newContent += 'Country: ' + array[i].Country + ' '; newContent += 'Favorite ' + array[i].Favorite + '

'; newContent += ''; }

// Update the page with the new content document.getElementById('content').innerHTML = newContent; }

places.json

{ "places": [ { "Name": "Traverse City", "Country": "Michigan", "Favorite": "Memory: Summer 2018" }, { "Name": "Antwerp", "Country": "Belgium", "Favorite": "Memory: My dorm" }, { "Name": "Firenze", "Country": "Italy", "Favorite": "Memory: March 2013" }, { "Name": "Paris", "Country": "France", "Favorite": "Memory: January 2018" }, { "Name": "Venice", "Country": "Italy", "Favorite": "Memory: March 2013" } ] }

movies.json

{ "movies": [ { "Name": "Avengers: Endgame", "Country": "United States", "Favorite": "Character: Iron Man" }, { "Name": "Loft", "Country": "Belgium", "Favorite": "Character: Filp Willems" }, { "Name": "The Notebook", "Country": "United States", "Favorite": "Character: Noah Calhoun" }, { "Name": "Troy", "Country": "United States", "Favorite": "Character: Paris" }, { "Name": "De Premier", "Country": "Belgium", "Favorite": "Character: Prime Minister" } ] }

bands.json

{ "bands": [ { "Name": "Tokio Hotel", "Country": "German", "Favorite":"Song: Phantomrider/Geisterfahrer" }, { "Name": "Thirty Seconds To Mars", "Country": "American", "Favorite": "Song: This Is War" }, { "Name": "Pentatonix", "Country": "American", "Favorite": "Song: Hallelujah" }, { "Name": "Coldplay", "Country": "British", "Favorite": "Song: Magic" }, { "Name": "Twenty One Pilots", "Country": "American", "Favorite": "Song: Car Radio" } ] }