Problem to get a object in json. Javascript

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
}

121 thoughts on “Problem to get a object in json. Javascript”

  1. Hey there, I think your site might be having browser compatibility issues.
    When I look at your website in Safari, it looks fine
    but when opening in Internet Explorer, it has some
    overlapping. I just wanted to give you a quick heads up!
    Other then that, very good blog!

    Reply
  2. I loved as much as you’ll receive carried out
    right here. The sketch is attractive, your authored material stylish.
    nonetheless, you command get bought an edginess over that you
    wish be delivering the following. unwell unquestionably come further formerly again since exactly the
    same nearly very often inside case you shield this hike.

    Reply