Obtenez certaines valeurs de JSON et l'affichage de la page html

voix
0

J'ai fait une petite page Web qui demande à l'utilisateur d'entrer le nom d'un acteur et j'espérais afficher alors tous les films de l'acteur était apparu. Pour ma question, je l'ai codé en dur l'URL api pour l'acteur (Bradley Tonnelier).

Comment puis-je attraper tous les titres de films, l'année de sortie, vue d'ensemble de film, et la valeur de l'affiche du film et les afficher sur la page? En ce moment, je suis seulement capable d'afficher un film et pour une raison étrange, ce n'est pas le premier film mentionné dans le fichier JSON.

Je pense que je dois obtenir les données JSON dans un tableau, mais je ne suis pas sûr de savoir comment faire et je ne suis pas sûr comment afficher alors plus d'un résultat sur la page.

Je vous remercie de toute aide et les conseils que vous pouvez fournir.

<!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>
Créé 20/10/2018 à 03:22
source utilisateur
Dans d'autres langues...                            


2 réponses

voix
0

Dans votre code, vous avez seul un seul conteneur pour afficher le film items.You besoin de boucle sur la réponse et créer de façon dynamique le film cards.Also utiliser le système de grille de CSS pour avoir plus de contrôle sur la carte vidéo et leur 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)

  }
});

Voir copie de travail complète ici à stackblitz

Créé 20/10/2018 à 04:02
source utilisateur

voix
-1

À l'heure actuelle, vous affichez les données dans la division unique, donc les données sont été écrasés. Au lieu de cela vous avez besoin de construire dynamiquement division pour chaque instruction puis attribuez-lui l'ensemble des données en page d'accueil.

Créez également que seule div en partie html avec id = « principale »

Voici le code mis à jour avec les changements ci-dessus. S'il vous plaît donner une bonne CSS aux divisions.

Code après avoir obtenu une réponse JSON

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;
Créé 20/10/2018 à 03:56
source utilisateur

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more