Question

我正在尝试使用AJAX调用从Web上的电影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);

任何帮助将不胜感激:)我出于安全原因也摆脱了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

在这部分代码中：

Module build failed: Error: ENOENT: no such file or directory, open '/foo/src/components/Main/Main.js'
 @ multi babel-polyfill webpack-dev-server/client?/ webpack/hot/dev-server ./src/client.js

＆＃39;结果＆＃39;尚未定义。我不知道你的期望和结果＆＃39;结果＆＃39;但是，我想猜测它只是responseText的json中的一个对象，所以你应该在displayData调用之前添加这一行：

var sourceData = JSON.parse(xhr.responseText); console.log(sourceData); displayData(results, title, poster_path, overview);如果var results = sourceData.results;不是results的属性，那么显然会使sourceData等于任何内容，在响应中，您需要它。

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 个答案: