0

I made a small webpage that asks the user to enter the name of an actor and I was hoping to then display all of the movies the actor had appeared in. For my question, I've hard coded the api URL for the actor (Bradley Cooper).

How do I grab all of the movie titles, the release year, movie overview, and the movie poster value and display them all on the page? Right now, I'm only able to display one movie and for some strange reason, it's not the first movie mentioned in the json file.

I think I need to get the json data into an array but I'm not sure how to do that and I'm not sure how to then display more than one result on the page.

I appreciate any help and guidance you can provide.

<!DOCTYPE html>
<html>

<body>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body onload="search_actor()">

<script>

  function search_actor() {

  $.getJSON({

    url: 'https://api.themoviedb.org/3/person/51329/movie_credits?api_key=f1d314280284e94ff7d1feeed7d44fdf',
    dataType: 'json',
    type: 'get',
    cache: false,
    success: function(data) {
        $(data.cast).each(function(index, moviedata) {

        // Movie Title
        document.getElementById("movietitle").innerHTML = moviedata.title;

        // Release Year
        document.getElementById("releaseyear").innerHTML = moviedata.release_date.substr(0, 4);

        // Movie Overview
        document.getElementById("movieoverview").innerHTML = moviedata.overview;

        // Movie Poster
        var fullmovieposterpath = '<img src=https://image.tmdb.org/t/p/w500/' + moviedata.poster_path + ' width="20%" height="20%">';
        document.getElementById("displaymovieposter").innerHTML = fullmovieposterpath;

        });
       }
     });
     }

</script>

<div id="movietitle"></div>
<div id="releaseyear"></div>
<div id="movieoverview"></div>
<div id="displaymovieposter"></div>
</body>
</html>
Improve this question
3
  • 1
    I'd imagine that you're displaying the last movie, rather than the first. You're simply looping through the results and setting the elements to the current iteration, therefore the result you see is simply whatever it was set to last - the last iteration of the loop. You need to create new elements for each result, rather than repeatedly changing the same ones. Also, you have two <body> tags. Commented Oct 20, 2018 at 3:31
  • @TylerRoper That's good, why not answer the question? Commented Oct 20, 2018 at 3:32
  • 1
    Because I didn't solve the issue, I just gave OP a push in the right direction. I don't believe this question warrants an answer because it has been asked many times already. Commented Oct 20, 2018 at 3:37

2 Answers 2

Reset to default
0

In your code you have single only one container to display the movie items.You need to loop over the response and dynamically create the movie cards.Also use css grid system to have more control over the movie card and their placement. 

$.getJSON({
  url: 'https://api.themoviedb.org/3/person/51329/movie_credits?api_key=f1d314280284e94ff7d1feeed7d44fdf',
  dataType: 'json',
  type: 'get',
  cache: false,
  success: function (data) {
    console.log(data)
    let k = '';
    data.cast.forEach(function (item) {
    //Using template literal to create a movie card
      k += `<div class='movie-card'>
              <div>${item.original_title}</div>
               <div><img src = 'https://image.tmdb.org/t/p/w500/${item.poster_path}'></div>
               <div><span>${item.release_date}</span></div>
               <div class='movie-desc'>${item.overview}</div>
              </div>`
    })
    $('.movie-conatiner').append(k)

  }
});

See complete working copy here at stackblitz

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

What div is this writing to? Also, your stackblitz link doesn't point to your example you mentioned.
@Pismo please check the link
That worked beautifully!! I was thinking of using template literals but didn't know where to start. Thank you so much for your help!
What if json returns this: {"page":1,"total_results":0,"total_pages":1,"results":[]} How do I tell the user something like "Not found"? If json does return search results, how do I then run the your solution you shared? Do I have to make an if/else statement? What does the syntax look like?
-1

Currently, you are displaying data in single division, so data is getting overwritten. Instead you need to dynamically build division in for each statement and then assign the entire data in home page.

Also create only single div in html part with id="main"

Below is the updated code with above change. Please give proper CSS to the divisions.

Code after getting json response

divcnt=1;

    divdata="";

    $(data.cast).each(function(index, moviedata) {          

         var fullmovieposterpath = '<img src=https://image.tmdb.org/t/p/w500/' + moviedata.poster_path + ' width="20%" height="20%">';

       divdata += '<div id="test'+ divcnt +'"><div id="movietitle'+ divcnt +'">'+moviedata.title+'</div><div id="releaseyear'+ divcnt +'">'+moviedata.release_date.substr(0, 4)+'</div><div id="movieoverview'+ divcnt +'">'+moviedata.overview+'</div><div id="displaymovieposter'+ divcnt +'">'+fullmovieposterpath+'</div></div>';

    });

      document.getElementById("main").innerHTML = divdata;
Improve this answer

1 Comment

I tried your code but I get an error: divcnt is not defined.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.