如何使用Vanilla JavaScript將這些API中的數據顯示到HTML中？

Question

我正在嘗試使用AJAX調用從網絡上的電影API中檢索數據。 這是我的HTML代碼：

<html>
    <head>
        <meta charset=utf-8>
        <title>Movie Database</title>
    </head>

    <body onload = "loadMyData(), loadYear()">
        <div id = "main-content">
            <h1>Movie Database</h1>

            <select id="genre"  class="filterButton">

           </select>

            <select id="releaseDate"  class="filterButton"> 

           </select>

           <input type="text" value="Enter Release Date YYYY-MM-DD">

           <button id="search">SEARCH</button>

        </div>
        <div id = "content"></div>
        <script src = "myScript4.js"></script>

    </body>

</html>

這是我的JS文件：

/* THIS IS THE JS FILE FOR THE www.themoviedb.org WEBSITE API */

// MY GLOBAL VARIABLES
var title;
var genre;
var releaseYear;
var summary;
var actors;
var languages; // What languges is the movie in?
var status; // Is this movie releases or still in production?


/* ======================= HERE ARE MY EVENT LISTENERS ==================*/

var myList = document.getElementById("getList");

var myYear = document.getElementById("getRelease");

var getGenre = document.getElementById("genre");

var getYear = document.getElementById("releaseDate"); 

/* ======================= End of my Event Listeners =================== */


/* =========This is the function to display the data in the HTML ======= */

function displayData(results, title, poster_path, overview)
{
   var div = document.createElement('div');
   div.setAttribute('results', Results);
   div.innerHTML = Title + '<br />' + Poster + Overview;
   document.body.appendChild(div);   
}

/* ============================ End function ========================= */

/* ============This is how the data from the genre is loaded ========== */

function loadMyData() {


    var data = "{}";

var xhr = new XMLHttpRequest();
xhr.withCredentials = false;
console.log(xhr);
xhr.addEventListener("readystatechange", function () {
  if (this.readyState === this.DONE) {
    //console.log(this.responseText);


        var sourceData = JSON.parse(xhr.responseText);
        console.log(sourceData);
      displayData(results, title, poster_path, overview);


        var source = document.getElementById("genre");

        for (var i = 0; i < sourceData.genres.length; i++) {
            console.log(i);

                optionID = sourceData.genres[i].id;
                var optionName = sourceData.genres[i].name;


                var option = document.createElement("option");
                option.innerHTML = optionName;
                option.setAttribute("value", optionID);
                option.setAttribute("name", optionName);
                source.appendChild(option);

            //displayData(results, title, poster_path, overview);
           //console.log(optionName);    

            }
        }
    });


xhr.open("GET", "https://api.themoviedb.org/3/genre/movie/list?language=en-US&api_key=**************");

xhr.send(data);
}




    // loads the year from the Discover part of the API
    function loadYear() {
        var data = "{}";

var newxhr = new XMLHttpRequest();
newxhr.withCredentials = false;
        console.log(newxhr);

newxhr.addEventListener("readystatechange", function () {
  if (this.readyState === this.DONE) {
    console.log(this.responseText);

      var sourceData = JSON.parse(newxhr.responseText);
        //console.log(sourceData);


        var source = document.getElementById("releaseDate");

        for (var i = 0; i < sourceData.results.length; i++) {
            console.log(i);

                optionID = sourceData.results[i].id;
                var optionName = sourceData.results[i].release_date;


                var option = document.createElement("option");
                option.innerHTML = optionName;
                option.setAttribute("value", optionID);
                option.setAttribute("name", optionName);
                source.appendChild(option);

            console.log(optionName);
        }
  }

});

    newxhr.open("GET", "https://api.themoviedb.org/3/discover/movie?page=1&include_video=false&include_adult=false&sort_by=popularity.desc&language=en-US&api_key=*****************");

newxhr.send(data);
    }

/* --------------------------------------------- On click show the data ------------------------------------------------ */

document.getElementById("search").addEventListener("click", displayData);

LoadMyData（）加載該類型的數據。 我想我應該重命名它。 當然，LoadYear（）會加載電影的日期。

一旦用戶單擊按鈕，DisplayData（）應該顯示JSON文件中的數據。

有人可以給我一個關於如何使用普通javascript和html顯示JSON數據的想法嗎？ 現在，我收到一條錯誤消息：

myScript4.js：55未捕獲的ReferenceError：在XMLHttpRequest中未定義結果。 （myScript4.js：55）

第55 displayData(results, title, poster_path, overview);此處： displayData(results, title, poster_path, overview);

任何幫助將不勝感激:)出於安全原因，我也擺脫了API密鑰。 我知道您不應該放棄他們。

這是loadYear（）函數的輸出JSON文件的片段：

{
  "page": 1,
  "total_results": 328130,
  "total_pages": 16407,
  "results": [
    {
      "vote_count": 2039,
      "id": 346364,
      "video": false,
      "vote_average": 7.4,
      "title": "It",
      "popularity": 745.88068,
      "poster_path": "/9E2y5Q7WlCVNEhP5GiVTjhEhx1o.jpg",
      "original_language": "en",
      "original_title": "It",
      "genre_ids": [
        12,
        18,
        27
      ],
      "backdrop_path": "/tcheoA2nPATCm2vvXw2hVQoaEFD.jpg",
      "adult": false,
      "overview": "In a small town in Maine, seven children known as The Losers Club come face to face with life problems, bullies and a monster that takes the shape of a clown called Pennywise.",
      "release_date": "2017-09-05"
    },

如您所見，“結果”位於JSON文件中。 這是JavaScript文件中未定義的位。 如何定義？

Answer 1

在代碼的這一部分：

var sourceData = JSON.parse(xhr.responseText);
console.log(sourceData);
displayData(results, title, poster_path, overview);

“結果”尚未定義。 我不知道您期望“結果”在哪里或什么，但是我將猜測它只是responseText的json內部的一個對象，因此您應該在displayData調用之前添加以下行：

var results = sourceData.results; 如果results不是sourceData的屬性，那么顯然使var results等於響應中的任何值，您需要它成為。

Answer 2

JavaScript是區分大小寫的語言

所以您的displayData函數似乎有一些錯誤的變量，應該像這樣：

function displayData(results, title, poster_path, overview)
{
  var div = document.createElement('div');
  div.setAttribute('results', results);
  div.innerHTML = title + '<br />' + poster_path + overview;
  document.body.appendChild(div);   
}

如何使用Vanilla JavaScript將這些API中的數據顯示到HTML中？

問題描述

2 個解決方案

解決方案1
1 2017-10-13 11:27:51

解決方案2
0 2017-10-13 10:20:38

如何使用Vanilla JavaScript將這些API中的數據顯示到HTML中？

問題描述

2 個解決方案

解決方案1 1 2017-10-13 11:27:51

解決方案2 0 2017-10-13 10:20:38

解決方案1
1 2017-10-13 11:27:51

解決方案2
0 2017-10-13 10:20:38