Problem to get a object in json. Javascript

Question

I'm doing a project for the school which is a website that shows all the information about all the films. i am using to do this the api the movie db, html css and javascript

1. right now I'm trying to get the buttons to take me to a certain genre of film

this is my code on 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>

This is my code on 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);
      })
    })
}

is giving me error on this line

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

and I don't know what to put, can someone help me?

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

Small sample of the returned 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
}

Answer 1

The Payload has no property with_genres, does it?

So this should work, didn't tested it yet, so please let me know:

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