javascript - 在 json 中获取对象的问题。Javascript

Question

我正在为学校做一个项目，这是一个显示所有电影信息的网站。我正在使用 api 电影 db、html css 和 javascript 来执行此操作

1. 现在我正试图让按钮带我去看某种类型的电影

这是我在 html 上的代码

<div class="wrapper-structure-esqueleto">

            <img class="logo" src="img/logo.png" alt="logo">

            <div class="first-section-hiperlinks">

                <h3>DISCOVER</h3>
                
                <a class="border-initial">
                    <p> aaa </p>
                </a>
                <a class="border">
                    <p> aaa </p>
                </a>
                <a class="border">
                    <p> aaa </p>
                </a>

            </div>
            <div class="second-section-hiperlinks">

                <h3>GENRES</h3>
            
                    <a href="#" class="border" id="doc-genre">
                        <p> genre-name </p>
                    </a>

            </div>

            <div class="footer">
                <div class="credits">
                    <p>Made by <strong>Francisco Lemos</strong></p>
                </div>
                <img src="img/poweredby.png">
            </div>

        </div>

        <!-- doc -->

        <div class="wrapper-structure">

            <img class="logo" src="img/logo.png" alt="logo">

            <div class="first-section-hiperlinks">

                <h3>DISCOVER</h3>
                
                <a class="border-initial">
                    <p> aaa </p>
                </a>
                <a class="border">
                    <p> aaa </p>
                </a>
                <a class="border">
                    <p> aaa </p>
                </a>

            </div>
            <div class="second-section-hiperlinks">

                <h3>GENRES</h3>
            
                <div class="wrapper" id="find-genres">
        
                </div>

            </div>

            <div class="footer">
                <div class="credits">
                    <p>Made by <strong>Francisco Lemos</strong></p>
                </div>
                <img src="img/poweredby.png">
            </div>

        </div>

这是我在 js 上的代码

function getFindGenres(){

  document.querySelector('.wrapper').innerHTML = "";

  axios( {
      method: 'get',
      url: 'https://api.themoviedb.org/3/discover/movie?api_key=(API-KEY)&page=1&with_genres=28'
    })
    .then(function (response) {
      response.data.with_genres.forEach(with_genres => {
        let htmlFindGenres = document.querySelector('.wrapper').outerHTML;
        htmlFindGenres = htmlFindGenres.replace('#find-genres',genre_ids);
        var d4 = document.querySelector('.wrapper');
        d4.insertAdjacentHTML('beforeend', htmlFindGenres);
      })
    })
}

在这条线上给我错误

 response.data.with_genres.forEach(with_genres => {

我不知道该放什么，有人可以帮助我吗？

https://api.themoviedb.org/3/discover/movie?api_key=(API-KEY)&page=1&with_genres=28 图片

返回 JSON 的小样本

{
  "page": 1,
  "results": [
    {
      "adult": false,
      "backdrop_path": "/srYya1Z1197Au4jUyAktDe3avyA.jpg",
      "genre_ids": [14, 28, 12],
      "id": 464052,
      "original_language": "en",
      "original_title": "Wonder Woman 1984",
      "overview": "Wonder Woman comes into conflict with the Soviet Union during the Cold War in the 1980s and finds a formidable foe by the name of the Cheetah.",
      "popularity": 1927.057,
      "poster_path": "/8UlWHLMPgZm9bx6QYh®NFOq67Tz.jpg",
      "release_date": "2020-12-16",
      "title": "Wonder Woman 1984",
      "video": false,
      "vote_average": 6.9,
      "vote_count": 3689
    },
    {
      "adult": false,
      "backdrop_path": "/6TPZSJ060EXeelx101VIATOj9Ry.jpg",
      "genre_ids": [28, 80, 53],
      "id": 587996,
      "original_language": "es",
      "original_title": "Bajocero",
      "overview": "When a prisoner transfer van is attacked, the cop in charge must fight those inside and outside while dealing with a silent foe: the icy temperatures.",
      "popularity": 1358.629,
      "poster_path": "/dwSnSAGTfc8U27bwsy 2RfWZsoBs.jpg",
      "release_date": "2021-01-29",
      "title": "Below Zero",
      "video": false,
      "vote_average": 6.4,
      "vote_count": 317
    },
    {
      "adult": false,
      "backdrop_path": "/10SdUkGQmbA15JQ3QoHqBZUbZhc.jpg",
      "genre_ids": [53, 28, 878],
      "id": 775996,
      "original language": "en",
      "original_title": "Outside the Wire",
      "overview": "In the near future, a drone pilot is sent into a deadly militarized zone and must work with an android officer to locate a doomsday device.",
      "popularity": 1230.86,
      "poster_path": "/6XYLiMxHAaCsoyrVo38LBWMw2p8.jpg",
      "release_date": "2021-01-15",
      "title": "Outside the Wire",
      "video": false,
      "vote_average": 6.5,
      "vote_count": 703
    }
  ],
  "total_pages": 500,
  "total_results": 10000
}

标签： javascriptjsonthemoviedb-api

Answer 1

Payload 没有属性with_genres，是吗？

所以这应该可以工作，还没有测试过，所以请告诉我：

function getFindGenres(){

  document.querySelector('.wrapper').innerHTML = "";

  axios( {
      method: 'get',
      url: 'https://api.themoviedb.org/3/discover/movie?api_key=(API-KEY)&page=1&with_genres=28'
    })
    .then(function (response) {
      response.data.results.forEach(result => {
        let htmlFindGenres = document.querySelector('.wrapper').outerHTML;
        htmlFindGenres = htmlFindGenres.replace('#find-genres',result.genre_ids);
        var d4 = document.querySelector('.wrapper');
        d4.insertAdjacentHTML('beforeend', htmlFindGenres);
      })
    }) }