Récupérer et affiche des informations dans une API

3 décembre 2018 à 16:49:57

Bonjour à tous.

En vue de mettre en application mes notions de base en javascript, je dois récupérer des informations dans une API avec $getJSON et les afficher dans une page web. Voici l'API que j'utilise : https://swapi.co/api/people/ . A chaque fois que l'utilisateur cliques sur le bouton, le code js devra récuperer le nom, le genre, la taille, la date de naissance, etc,... et les afficher. Je galère vraiment dessus et je ne sais pas pourquoi ça ne marche

Voici le code que j'ai écrit.

<!DOCTYPE html>
<html lang="en">
 <head>
    <meta charset="utf-8">

    <title>JS Application</title>
    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css">
    <link href="https://fonts.googleapis.com/css?family=Playfair+Display:400i,900i" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Anton|Playfair+Display" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
  </head>
  
  <body>
    <h2>Assignement#2</h2>
    <p>
      Welcome to my site. This is a combination between HTML, CSS, and JS. We load some informations about some stars on <a href="https://swapi.co/api/people/">https://swapi.co/api/people/</a> and show some informations like name, gender, height, weight, birth date, hair, skin and eye colors of these stars. You have to click on button below to see the results.
    </p>
    <center>
      <button onclick="ourFunction()">
  <h5>Click me, I'll show Stars' informations.</h5>
      </button>
    </center>
   <center>
             <div class ="info">
                 <div>
                     <h5>Name: 
                       <span class="name">Name </span>
                     </h5>
                 </div>
                 <div>
                     <h5>Gender:
                          <span class="gender">Gender </span>
                     </h5>
                 </div>
                 <div>
                     <h5>Height:
                         <span class="height">Height </span>
                     </h5>
                 </div>
                 <div>
                     <h5>Weight:
                         <span class="weight">Weight </span>
                     </h5>
                 </div>
                 <div>
                     <h5>Date of Birth:
                         <span class="birth_year">Birth_year </span>
                     </h5>
                 </div>
                 <div>
                     <h5>Hair Color:
                         <span class="hair">Hair </span>
                     </h5>
                 </div>
                 <div>
                     <h5>Skin Color:
                         <span class="skin">Skin </span>
                     </h5>
                 </div>
                 <div>
                     <h5>Eye Color
                         <span class="eye">Eye </span>
                     </h5>
                 </div>
            
         </div>
   </center>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="main.js">
       var name = $(".name")
       var gender = $(".gender");
       var height = $(".height");
       var weight = $(".weight");
       var birth = $(".birth_year");
       var hair = $(".hair");
       var skin = $(".skin");
       var eye = $(".eye");

       function ourFunction() {
    
       $.getJSON(jsonUrl,parameters,myCallback)
                               }

       var jsonUrl = "https://swapi.co/api/people/";
       var parameters = {
       dataType: 'json',
                        }
       function myCallback(json) {
          console.log(json);
          name.text(json.results[0].name)
          gender.text(json.results[0].gender)
          height.text(json.results[0].height)
          weight.text(json.results[0].mass)
          birth.text(json.results[0].birth_year)
          hair.text(json.results[0].hair_color)
          skin.text(json.results[0].skin_color)
          eye.text(json.results[0].eye_color)
                                  }
    </script>
  </body>
</html>

mathias2oliveira

3 décembre 2018 à 17:02:00

Salut,

Je te laisse tester ça normalement c'est bon, si c'est le cas je te laisse chercher les différences avec ton code haha et si tu trouves vraiment pas je t'invites à en parler par message :)

<!DOCTYPE html>
<html lang="en">
 <head>
    <meta charset="utf-8">
 
    <title>JS Application</title>
     
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css">
    <link href="https://fonts.googleapis.com/css?family=Playfair+Display:400i,900i" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Anton|Playfair+Display" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
  </head>
   
  <body>
    <h2>Assignement#2</h2>
    <p>
      Welcome to my site. This is a combination between HTML, CSS, and JS. We load some informations about some stars on <a href="https://swapi.co/api/people/">https://swapi.co/api/people/</a> and show some informations like name, gender, height, weight, birth date, hair, skin and eye colors of these stars. You have to click on button below to see the results.
    </p>
    <center>
      <button onclick="ourFunction()">
  <h5>Click me, I'll show Stars' informations.</h5>
      </button>
    </center>
   <center>
             <div class ="info">
                 <div>
                     <h5>Name:
                       <span class="name">Name </span>
                     </h5>
                 </div>
                 <div>
                     <h5>Gender:
                          <span class="gender">Gender </span>
                     </h5>
                 </div>
                 <div>
                     <h5>Height:
                         <span class="height">Height </span>
                     </h5>
                 </div>
                 <div>
                     <h5>Weight:
                         <span class="weight">Weight </span>
                     </h5>
                 </div>
                 <div>
                     <h5>Date of Birth:
                         <span class="birth_year">Birth_year </span>
                     </h5>
                 </div>
                 <div>
                     <h5>Hair Color:
                         <span class="hair">Hair </span>
                     </h5>
                 </div>
                 <div>
                     <h5>Skin Color:
                         <span class="skin">Skin </span>
                     </h5>
                 </div>
                 <div>
                     <h5>Eye Color
                         <span class="eye">Eye </span>
                     </h5>
                 </div>
             
         </div>
   </center>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
       var name = $(".name")
       var gender = $(".gender");
       var height = $(".height");
       var weight = $(".weight");
       var birth = $(".birth_year");
       var hair = $(".hair");
       var skin = $(".skin");
       var eye = $(".eye");
 
       function ourFunction() {
     
       $.getJSON(jsonUrl,parameters,myCallback)
                               }
 
       var jsonUrl = "https://swapi.co/api/people/?format=json";
       var parameters = {
       dataType: 'json',
                        }
       function myCallback(json) {
          console.log(json);
          $(".name").text(json.results[0].name)
          gender.text(json.results[0].gender)
          height.text(json.results[0].height)
          weight.text(json.results[0].mass)
          birth.text(json.results[0].birth_year)
          hair.text(json.results[0].hair_color)
          skin.text(json.results[0].skin_color)
          eye.text(json.results[0].eye_color)
                                  }
    </script>

    
  </body>
</html>

adamaeln

3 décembre 2018 à 23:29:40

Salut,

C'est bien ce que je cherche à faire. Merci vraiment pour ton aide. En même je la différence que je vois se trouve à ce niveau:

 $(".name").text(json.results[0].name)

En même temps je ne comprends pas en quoi est ce différent du mien.

Désolé pour le retard dans ma réponse car j'étais au sport.