Hi I need help with this project in Jquery. I am trying to print JSON data from
ID: 3851378 • Letter: H
Question
Hi I need help with this project in Jquery. I am trying to print JSON data from an API and It is displaying the cast data in list, but I want to display all cast name like this: Cast : Tom Cruize, Emily Blunt, Brad Pitt...Same with Genres and Crew names.
JSON DATA link:(PLEASE KEEP THE API KEY PRIVATE PLEASE!!!)
https://api.themoviedb.org/3/movie/313369?api_key=93ec62548f104629a664abd20b2debe8&append_to_response=credits
Current output:
This is my code: (Please keep the api key private, Please!!)
axios.get('https://api.themoviedb.org/3/movie/' + movieId + '?api_key=93ec62548f104629a664abd20b2debe8&append_to_response=credits').then((response) => {
console.log(response);
let some = response.data;
let output = '';
output = `
<div class="row">
<div class="col-md-4">`;
if (some.poster_path == null) {
some.poster_path = "Image-not-found.gif";
output += ` <img src="${some.poster_path}">`;
} else {
output += `<img src="https://image.tmdb.org/t/p/w500${some.poster_path}"> </div>`;
}output +=
` <div class="col-md-8">
<h2>${some.title}</h2>
<ul class="list-group">`;
$.each(some.genres, (index, done) => {output += `<li class="list-group-item"><strong>Genre: </strong>${done.name},`;});
output += `</li><li class="list-group-item"><strong>Released Date: </strong>${some.release_date}</li>
<li class="list-group-item"><strong>Rating: </strong>${some.vote_average}/10</li>`;
$.each(some.credits.cast, (index, lotof) => {output += `<pclass="list-group-item"><strong>Cast: </strong>${lotof.name}</p>`;});
$.each(some.credits.crew, (index, find) => {output += `<p class="list-group-item"><strong>Crew: </strong>${find.name}</p>`;});
Genre: Mystery, Genre: Thriller, Genre: Horror,Explanation / Answer
Your code is reading and printing `Genre: <Name>` for every data. So, a slight modification in your logic is the answer
New Logic :
1). Read whole of data and save it into a temporary list.
2). Add the temporary list to output.
Below is the modified code. I have inserted spaces for clarity. You can remove them. Please comment if you have any concern
axios.get('https://api.themoviedb.org/3/movie/' + movieId + '?api_key=93ec62548f104629a664abd20b2debe8&append_to_response=credits').then((response) => {
console.log(response);
let some = response.data;
let tmpGenre = 'Genre: ';
let tmpCast = 'Cast: ';
let tmpCrew = 'Crew: ';
let output = '';
output = `
<div class="row">
<div class="col-md-4">`;
if (some.poster_path == null) {
some.poster_path = "Image-not-found.gif";
output += ` <img src="${some.poster_path}">`;
} else {
output += `<img src="https://image.tmdb.org/t/p/w500${some.poster_path}"> </div>`;
}output +=
` <div class="col-md-8">
<h2>${some.title}</h2>
<ul class="list-group">`;
$.each(some.genres, (index, done) => {tmpGenre += `${done.name}<span>,</span>`;});
output += tmpGenre;
output += `<li class="list-group-item"><strong>Released Date: </strong>${some.release_date}</li>
<li class="list-group-item"><strong>Rating: </strong>${some.vote_average}/10</li>`;
$.each(some.credits.cast, (index, lotof) => {tmpCast += `${lotof.name}<span>,</span>`;});
output += tmpCast;
$.each(some.credits.crew, (index, find) => {tmpCrew += `${find.name}<span>,</span>`;});
output += tmpCrew;