1. Accueil
  2. Question et réponse
  3. Affichage des résultats de l'API avec JavaScript et HTML

Affichage des résultats de l'API avec JavaScript et HTML

2017-01-24 1 views
1

Tout d'abord, je suis très novice dans l'utilisation des API. Et l'anglais est pas ma première langue. J'ai cherché sur le web, mais je n'ai pas trouvé exactement ce que je cherchais, ou du moins je n'ai pas assez compris ce que j'ai lu pour comprendre comment le modifier et l'appliquer à ma situation.Affichage des résultats de l'API avec JavaScript et HTML

Je travaille avec l'API Omdb et l'API Giphy, ce qui rend la page idiote. J'utilise JavaScript et HTML. À la fin, je veux que la page affiche le résultat de la recherche de l'utilisateur recherchant un film + gifs sur le sujet.

Je suis venu si loin que j'ai un résultat des deux API. C'est tout bon et bien. Ce que je ne sais pas comment faire est de présenter ces résultats, par exemple, juste les titres de films et les fichiers .gif. Mes tentatives pour diviser les résultats retournés ont échoué jusqu'ici. Aucune suggestion? Voici mon code JavaScript.

var form = document.getElementById('search-form'); 

form.addEventListener("submit", search); 

function search(event) { 
    event.preventDefault(); 
    document.getElementById("present_result").innerHTML = ""; 
    if(this.elements.query.value === '') { 
    alert("Enter search word!"); 
    } else { 
    var rawInputData = this.elements.query.value; 
    var fixedInputData = rawInputData.split(" "); 
    var inputData = encodeQueryData(fixedInputData); 
    var inputDataGif = encodeQueryDataGif(fixedInputData); 

    function encodeQueryData(data) { 
     let ret = []; 
     for (let d in data) 
     ret.push(encodeURIComponent(data[d])); 
     return ret.join('%20'); 
    } 

    function encodeQueryDataGif(data) { 
     let ret = []; 
     for (let d in data) 
     ret.push(encodeURIComponent(data[d])); 
     return ret.join('+'); 
    } 

    var omdbAPI = new XMLHttpRequest(); 
    var gifAPI = new XMLHttpRequest(); 
    var omdbURL = "http://www.omdbapi.com/?s=" + inputData + "&type=movie"; 
    var gifURL = "http://api.giphy.com/v1/gifs/search?q=" + inputDataGif + "&limit=1&api_key=dc6zaTOxFJmzC"; 

    omdbAPI.addEventListener("load", function() { 
     if (this.responseText === '{"Response":"False","Error":"Movie not found!"}') 
     { 
     alert("No result."); 
     } else { 
     var result = JSON.parse(this.responseText); 
     console.log(result); 
     result = JSON.stringify(result); 
     document.getElementById("present_result").innerHTML = result; 
     } 
    }); 

     gifAPI.addEventListener("load", function() { 
     if (this.responseText === '{"Response":"False","Error":"Not found!"}') 
     { 
      alert("No Result."); 
     } else { 
      var result = JSON.parse(this.responseText); 

      console.log(result); 
      result = JSON.stringify(result); 
      document.getElementById("present_gif").innerHTML = result; 
     } 
     }); 

    omdbAPI.open("get", omdbURL, true); 
    omdbAPI.send(); 
    gifAPI.open("get", gifURL, true); 
    gifAPI.send(); 
    } 
}

Et en dessous du code HTML.

<!doctype html> 
<html> 
    <head> 
     <meta charset="utf-8"> 
     <title>Mashup test</title> 
     <link rel="stylesheet" type="text/css" href="style.css"> 
    </head> 
    <body> 
     <!-- Form --> 
     <form action="" method="get" id="search-form" class="search-form"> 
      Movie: <input type="text" name="query"> 
      <button type="submit" id="submit">Search</button> 
     </form> 

     <!-- Result --> 
     <div id="present_result"> 
     </div> 
     <div id="present_gif"> 
     </div> 
     <script src="scripts.js"></script> 
    </body> 
</html>

Et voici un exemple de résultat de OMDB:

{ 
    "Search": [{ 
     "Title": "Titanic", 
     "Year": "1997", 
     "imdbID": "tt0120338", 
     "Type": "movie", 
     "Poster": "https://images-na.ssl-images-amazon.com/images/M/MV5BZDNiMjE0NDgt[email protected]._V1_SX300.jpg" 
    }, { 
     "Title": "Titanic II", 
     "Year": "2010", 
     "imdbID": "tt1640571", 
     "Type": "movie", 
     "Poster": "https://images-na.ssl-images-amazon.com/images/M/[email protected]@._V1_SX300.jpg" 
    }, { 
     "Title": "Titanic: The Legend Goes On...", 
     "Year": "2000", 
     "imdbID": "tt0330994", 
     "Type": "movie", 
     "Poster": "https://images-na.ssl-images-amazon.com/images/M/[email protected]@._V1_SX300.jpg" 
    }, { 
     "Title": "Titanic", 
     "Year": "1953", 
     "imdbID": "tt0046435", 
     "Type": "movie", 
     "Poster": "https://images-na.ssl-images-amazon.com/images/M/[email protected]_V1_SX300.jpg" 
    }, { 
     "Title": "Raise the Titanic", 
     "Year": "1980", 
     "imdbID": "tt0081400", 
     "Type": "movie", 
     "Poster": "https://images-na.ssl-images-amazon.com/images/M/[email protected]@._V1_SX300.jpg" 
    }, { 
     "Title": "The Legend of the Titanic", 
     "Year": "1999", 
     "imdbID": "tt1623780", 
     "Type": "movie", 
     "Poster": "https://images-na.ssl-images-amazon.com/images/M/[email protected]_V1_SX300.jpg" 
    }, { 
     "Title": "The Chambermaid on the Titanic", 
     "Year": "1997", 
     "imdbID": "tt0129923", 
     "Type": "movie", 
     "Poster": "https://images-na.ssl-images-amazon.com/images/M/MV5BMWUzYjgyNDE[email protected]@._V1_SX300.jpg" 
    }, { 
     "Title": "In Search of the Titanic", 
     "Year": "2004", 
     "imdbID": "tt1719665", 
     "Type": "movie", 
     "Poster": "https://images-na.ssl-images-amazon.com/images/M/MV5BMTAzNjY0NDA2NzdeQTJeQWpwZ15BbWU4MDIwMzc1MzEx._V1_SX300.jpg" 
    }, { 
     "Title": "Titanic", 
     "Year": "1943", 
     "imdbID": "tt0036443", 
     "Type": "movie", 
     "Poster": "https://images-na.ssl-images-amazon.com/images/M/[email protected]@._V1_SX300.jpg" 
    }, { 
     "Title": "S.O.S. Titanic", 
     "Year": "1979", 
     "imdbID": "tt0079836", 
     "Type": "movie", 
     "Poster": "https://images-na.ssl-images-amazon.com/images/M/[email protected]@._V1_SX300.jpg" 
    }], 
    "totalResults": "170", 
    "Response": "True" 
}

et le résultat de l'échantillon Giphy:

{ 
    "data": [{ 
     "type": "gif", 
     "id": "pWDH6fkHgGHza", 
     "slug": "titanic-leonardo-dicaprio-pWDH6fkHgGHza", 
     "url": "http://giphy.com/gifs/titanic-leonardo-dicaprio-pWDH6fkHgGHza", 
     "bitly_gif_url": "http://gph.is/Z15kA0", 
     "bitly_url": "http://gph.is/Z15kA0", 
     "embed_url": "http://giphy.com/embed/pWDH6fkHgGHza", 
     "username": "", 
     "source": "http://tomhiddles.tumblr.com/post/37231367662", 
     "rating": "g", 
     "content_url": "", 
     "source_tld": "tomhiddles.tumblr.com", 
     "source_post_url": "http://tomhiddles.tumblr.com/post/37231367662", 
     "is_indexable": 0, 
     "import_datetime": "2013-03-24 01:54:54", 
     "trending_datetime": "1970-01-01 00:00:00", 
     "images": { 
      "fixed_height": { 
       "url": "http://media0.giphy.com/media/pWDH6fkHgGHza/200.gif", 
       "width": "513", 
       "height": "200", 
       "size": "271598", 
       "mp4": "http://media0.giphy.com/media/pWDH6fkHgGHza/200.mp4", 
       "mp4_size": "19808", 
       "webp": "http://media0.giphy.com/media/pWDH6fkHgGHza/200.webp", 
       "webp_size": "392604" 
      }, 
      "fixed_height_still": { 
       "url": "http://media0.giphy.com/media/pWDH6fkHgGHza/200_s.gif", 
       "width": "513", 
       "height": "200" 
      }, 
      "fixed_height_downsampled": { 
       "url": "http://media0.giphy.com/media/pWDH6fkHgGHza/200_d.gif", 
       "width": "513", 
       "height": "200", 
       "size": "530508", 
       "webp": "http://media0.giphy.com/media/pWDH6fkHgGHza/200_d.webp", 
       "webp_size": "196204" 
      }, 
      "fixed_width": { 
       "url": "http://media0.giphy.com/media/pWDH6fkHgGHza/200w.gif", 
       "width": "200", 
       "height": "78", 
       "size": "65057", 
       "mp4": "http://media0.giphy.com/media/pWDH6fkHgGHza/200w.mp4", 
       "mp4_size": "24950", 
       "webp": "http://media0.giphy.com/media/pWDH6fkHgGHza/200w.webp", 
       "webp_size": "74208" 
      }, 
      "fixed_width_still": { 
       "url": "http://media0.giphy.com/media/pWDH6fkHgGHza/200w_s.gif", 
       "width": "200", 
       "height": "78" 
      }, 
      "fixed_width_downsampled": { 
       "url": "http://media0.giphy.com/media/pWDH6fkHgGHza/200w_d.gif", 
       "width": "200", 
       "height": "78", 
       "size": "100970", 
       "webp": "http://media0.giphy.com/media/pWDH6fkHgGHza/200w_d.webp", 
       "webp_size": "37622" 
      }, 
      "fixed_height_small": { 
       "url": "http://media0.giphy.com/media/pWDH6fkHgGHza/100.gif", 
       "width": "256", 
       "height": "100", 
       "size": "271598", 
       "mp4": "http://media0.giphy.com/media/pWDH6fkHgGHza/100.mp4", 
       "mp4_size": "170265", 
       "webp": "http://media0.giphy.com/media/pWDH6fkHgGHza/100.webp", 
       "webp_size": "98852" 
      }, 
      "fixed_height_small_still": { 
       "url": "http://media0.giphy.com/media/pWDH6fkHgGHza/100_s.gif", 
       "width": "256", 
       "height": "100" 
      }, 
      "fixed_width_small": { 
       "url": "http://media0.giphy.com/media/pWDH6fkHgGHza/100w.gif", 
       "width": "100", 
       "height": "39", 
       "size": "65057", 
       "mp4": "http://media0.giphy.com/media/pWDH6fkHgGHza/100w.mp4", 
       "mp4_size": "45670", 
       "webp": "http://media0.giphy.com/media/pWDH6fkHgGHza/100w.webp", 
       "webp_size": "23380" 
      }, 
      "fixed_width_small_still": { 
       "url": "http://media0.giphy.com/media/pWDH6fkHgGHza/100w_s.gif", 
       "width": "100", 
       "height": "39" 
      }, 
      "downsized": { 
       "url": "http://media0.giphy.com/media/pWDH6fkHgGHza/giphy.gif", 
       "width": "500", 
       "height": "195", 
       "size": "1006467" 
      }, 
      "downsized_still": { 
       "url": "http://media0.giphy.com/media/pWDH6fkHgGHza/giphy_s.gif", 
       "width": "500", 
       "height": "195" 
      }, 
      "downsized_large": { 
       "url": "http://media0.giphy.com/media/pWDH6fkHgGHza/giphy.gif", 
       "width": "500", 
       "height": "195", 
       "size": "1006467" 
      }, 
      "downsized_medium": { 
       "url": "http://media0.giphy.com/media/pWDH6fkHgGHza/giphy.gif", 
       "width": "500", 
       "height": "195", 
       "size": "1006467" 
      }, 
      "original": { 
       "url": "http://media0.giphy.com/media/pWDH6fkHgGHza/giphy.gif", 
       "width": "500", 
       "height": "195", 
       "size": "1006467", 
       "frames": "12", 
       "mp4": "http://media0.giphy.com/media/pWDH6fkHgGHza/giphy.mp4", 
       "mp4_size": "84279", 
       "webp": "http://media0.giphy.com/media/pWDH6fkHgGHza/giphy.webp", 
       "webp_size": "378130" 
      }, 
      "original_still": { 
       "url": "http://media0.giphy.com/media/pWDH6fkHgGHza/giphy_s.gif", 
       "width": "500", 
       "height": "195" 
      }, 
      "looping": { 
       "mp4": "http://media.giphy.com/media/pWDH6fkHgGHza/giphy-loop.mp4" 
      }, 
      "preview": { 
       "mp4": "http://media3.giphy.com/media/pWDH6fkHgGHza/giphy-preview.mp4", 
       "mp4_size": "44332", 
       "width": "326", 
       "height": "126" 
      }, 
      "downsized_small": { 
       "mp4": "http://media3.giphy.com/media/pWDH6fkHgGHza/giphy-downsized-small.mp4", 
       "mp4_size": "116662" 
      } 
     } 
    }], 
    "meta": { 
     "status": 200, 
     "msg": "OK", 
     "response_id": "5887622069432538bfa2a521" 
    }, 
    "pagination": { 
     "total_count": 11258, 
     "count": 1, 
     "offset": 0 
    } 
}

Source

2017-01-24 Zarkaylia

+1

Qu'est-ce que vous avez dans 'result' après que vous faites' var result = JSON.parse (this.responseText); '? –

+0

@MajidFouladpour Dans les deux cas, [object Object] apparaît comme résultat. En supposant que vous voulez ignorer le JSON.stringify. – Zarkaylia

+1

Non, je ne le fais pas. Je veux dire, si vous inspectez la valeur de 'result' dans la console (F12> Sources, puis définissez un * point d'arrêt *), que voyez-vous? –

Répondre

3

Les deux API vous renvoient un objet JSON.

Un objet JSON est de construire généralement comme ceci:

{ 
    "property1": "value1", 
    "property2": "value2" 
    "property_array": ["arrayValue1", "arrayValue2"], 
    "property_object": { 
     "propertyA": "valueA", 
     "attributeB": "valueB" 
    } 
}

Alors utilisation OMDB (par exemple):

pour accéder aux résultats, vous devez acces l'attribut "Recherche":

var entries = result.Search;

Ensuite, vous devez « boucle » sur chaque propriété de l'objet de recherche (whitch est également un objet):

de le faire, vous pouvez utiliser une boucle for ... in:

for(var entry_key in entries) { 
    // control that property is own by the object (not prototype) 
    if(entries.hasOwnProperty(entry_key)) { 
     // do whatever you want with the entry 
     // To access the entry, use this notation: 
     var entry = entries[entry_key]; 
     // to stay with OMDb example, this should be: 
     var movie_title = entry.Title; 
    } 
} 


var results = { 
 
    "Search": [{ 
 
     "Title": "Titanic", 
 
     "Year": "1997", 
 
     "imdbID": "tt0120338", 
 
     "Type": "movie", 
 
     "Poster": "https://images-na.ssl-images-amazon.com/images/M/MV5BZDNiMjE0NDgt[email protected]._V1_SX300.jpg" 
 
    }, { 
 
     "Title": "Titanic II", 
 
     "Year": "2010", 
 
     "imdbID": "tt1640571", 
 
     "Type": "movie", 
 
     "Poster": "https://images-na.ssl-images-amazon.com/images/M/[email protected]@._V1_SX300.jpg" 
 
    }, { 
 
     "Title": "Titanic: The Legend Goes On...", 
 
     "Year": "2000", 
 
     "imdbID": "tt0330994", 
 
     "Type": "movie", 
 
     "Poster": "https://images-na.ssl-images-amazon.com/images/M/[email protected]@._V1_SX300.jpg" 
 
    }, { 
 
     "Title": "Titanic", 
 
     "Year": "1953", 
 
     "imdbID": "tt0046435", 
 
     "Type": "movie", 
 
     "Poster": "https://images-na.ssl-images-amazon.com/images/M/[email protected]_V1_SX300.jpg" 
 
    }, { 
 
     "Title": "Raise the Titanic", 
 
     "Year": "1980", 
 
     "imdbID": "tt0081400", 
 
     "Type": "movie", 
 
     "Poster": "https://images-na.ssl-images-amazon.com/images/M/[email protected]@._V1_SX300.jpg" 
 
    }, { 
 
     "Title": "The Legend of the Titanic", 
 
     "Year": "1999", 
 
     "imdbID": "tt1623780", 
 
     "Type": "movie", 
 
     "Poster": "https://images-na.ssl-images-amazon.com/images/M/[email protected]_V1_SX300.jpg" 
 
    }, { 
 
     "Title": "The Chambermaid on the Titanic", 
 
     "Year": "1997", 
 
     "imdbID": "tt0129923", 
 
     "Type": "movie", 
 
     "Poster": "https://images-na.ssl-images-amazon.com/images/M/MV5BMWUzYjgyNDE[email protected]@._V1_SX300.jpg" 
 
    }, { 
 
     "Title": "In Search of the Titanic", 
 
     "Year": "2004", 
 
     "imdbID": "tt1719665", 
 
     "Type": "movie", 
 
     "Poster": "https://images-na.ssl-images-amazon.com/images/M/MV5BMTAzNjY0NDA2NzdeQTJeQWpwZ15BbWU4MDIwMzc1MzEx._V1_SX300.jpg" 
 
    }, { 
 
     "Title": "Titanic", 
 
     "Year": "1943", 
 
     "imdbID": "tt0036443", 
 
     "Type": "movie", 
 
     "Poster": "https://images-na.ssl-images-amazon.com/images/M/[email protected]@._V1_SX300.jpg" 
 
    }, { 
 
     "Title": "S.O.S. Titanic", 
 
     "Year": "1979", 
 
     "imdbID": "tt0079836", 
 
     "Type": "movie", 
 
     "Poster": "https://images-na.ssl-images-amazon.com/images/M/[email protected]@._V1_SX300.jpg" 
 
    }], 
 
    "totalResults": "170", 
 
    "Response": "True" 
 
}; 
 

 

 
var movies_list = document.getElementById('movies-list'); 
 

 
var entries = results.Search; 
 

 
for(var entry_key in entries) { 
 
\t // control that property is own by the object (not prototype) 
 
\t if(entries.hasOwnProperty(entry_key)) { 
 
\t \t // do whatever you want with the entry 
 
\t \t // To access the entry, use this notation: 
 
\t \t var entry = entries[entry_key]; 
 
\t \t // to stay with OMDb example, this should be: 
 
     var movie_line = '<p><strong>Title:</strong> ' 
 
         + entry.Title + ' (year: ' + entry.Year + ')</p>'; 
 
\t movies_list.innerHTML += movie_line; 
 
\t } 
 
}
<div id="movies-list"> 
 
</div>

Source

2017-01-24 14:58:16 Dexter0015

+0

Merci pour la réponse très soignée et bien expliquée! 3 – Zarkaylia

 Questions connexes

  • Aucun problème connexe^_^