在 json 中获取对象的问题 Javascript

问题描述

我正在为学校做一个项目，这是一个显示所有电影信息的网站。我正在使用 api 电影数据库、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 => {

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

Image of 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","Vote_average": 6.4,"Vote_count": 317
    },"backdrop_path": "/10SdUkGQmbA15JQ3QoHqBZUbZhc.jpg","genre_ids": [53,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","Vote_average": 6.5,"Vote_count": 703
    }
  ],"total_pages": 500,"total_results": 10000
}

解决方法

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);
      })
    }) }