Twitter Bootstrap Question posted in

uncaught in promises in vanilla js-Twitter bootstrap

I am making some mapping with moviedb api using innerhtml, the problem i am having is with the Main.appendChild where the appendChild is handle as a property and not as a function. I am having the same issue in the console with the entire main array and i think it might having something to do with the fact that i am declering the main object to a htmlelemnt then to a array. Btw i have given up on this project hence it wasnt worth the extra time that it took
this is kinda of a filler part so excuse me pls.

const API_KEY = "api_key=0a2c754df24f03f4197199045aedf7de";
const BASE_URL = "https://api.themoviedb.org/3";
const API_URL = BASE_URL + "/discover/movie?sort_by=popularity.desc&" + API_KEY;
const IMG_URL = "https://image.tmdb.org/t/p/w500";

const main = document.getElementById("main");
getMovies(API_URL);

function getMovies(url) {
  fetch(url).then(res => res.json())
    .then(data => {
      console.log(data.results);
      showMovies(data.results);
    })
}

function showMovies(data) {
  main.innerHTML = " ";

  data.forEach(main => {
    const { title, vote_average, overview, poster_path } = main;

    const movieEl = document.createElement("div");
    movieEl.classList.add("movie");
    movieEl.innerHTML = `
  
                <img
                  src="${IMG_URL + poster_path} alt-""${title}"
                />
              </a>
            </div>
            <div class="list-content">
              <h2>
                <a href="single-movie.html" class="text-black"
                  ></a
                >
              </h2>
              <span class="list-meta">
                <span class="list-meta-item"
                  ><i class="fas fa-clock"></i> 2018</span
                >
                <a href="#" class="list-meta-item"
                  ><i class="fas fa-star"></i> ${vote_average}</a
                >
              </span>
              <p>
                ${overview}
              </p>
            </div>
          
    `;
    main.appendChild(movieEl);
  });
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <link rel="icon" href="img/favicon.png" />

    <title>Movies - Get Booked Online</title>
    <link rel="stylesheet" href="css/main.css" type="text/css" />
    <link
      href="https://fonts.googleapis.com/css?family=Roboto"
      rel="stylesheet"
    />
    <link
      rel="stylesheet"
      href="https://use.fontawesome.com/releases/v5.0.13/css/all.css"
      integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp"
      crossorigin="anonymous"
    />

    <!-- Bootstrap core CSS -->
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"
      integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4"
      crossorigin="anonymous"
    />
  </head>

  <body>
    <nav class="navbar navbar-expand-md">
      <a class="navbar-brand" href="index.html"><img src="img/logo.png" /></a>
      <button
        class="navbar-toggler"
        type="button"
        data-toggle="collapse"
        data-target="#navbarsExampleDefault"
        aria-controls="navbarsExampleDefault"
        aria-expanded="false"
        aria-label="Toggle navigation"
      >
        <i class="fas fa-bars"></i>
      </button>

      <div class="collapse navbar-collapse" id="navbarsExampleDefault">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item">
            <a class="nav-link" href="index.html"
              ><i class="fas fa-home"></i> Home</a
            >
          </li>
          <li class="nav-item active">
            <a class="nav-link" href="#"><i class="fas fa-film"></i> Movies</a>
          </li>
        </li>
        <li class="nav-item dropdown">
          <a
            class="nav-link dropdown-toggle"
            data-toggle="dropdown"
            href="#"
            role="button"
            aria-haspopup="true"
            aria-expanded="false"
            ><i class="fas fa-crown"></i> Genre</a
          >
          <div class="dropdown-menu">
            <a class="dropdown-item" href="#">Adventure</a>
            <a class="dropdown-item" href="#">Horror</a>
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Animation</a>
            <a class="dropdown-item" href="#">Comedy</a>
            <a class="dropdown-item" href="#">Fantasy</a>
          </div>
        </li>
      </ul>

      <a class="nav-button" href="movies.html"
        ><i class="fas fa-newspaper"></i> Latest Movies</a
      >
      </div>
    </nav>
    <!-- breadcrumbs -->
    <nav aria-label="breadcrumb">
      <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="#">Home</a></li>
        <li class="breadcrumb-item active" aria-current="page">Movies</li>
      </ol>
    </nav>
    <!-- /breadcrumbs -->
    <!-- movie cards -->
    <div class="container">
      <div class="alert alert-primary" role="alert">
        <i class="fas fa-exclamation-circle"></i> The following movies are
        currently in theaters.
      </div>
      <main id ="main">
      <div class="row">
        <div class="col-sm-6 col-xs-6">
          <div class="list mb-2">
            <div class="list-header">
              <a class="list-header-image">
                <img
                  src="https://image.tmdb.org/t/p/w600_and_h900_bestv2/wCvTSaIQEweNdsU98usvt9re7fq.jpg"
                />
              </a>
            </div>
            <div class="list-content">
              <h2>
                <a href="single-movie.html" class="text-black"
                  >Avengers: Infinity War</a
                >
              </h2>
              <span class="list-meta">
                <span class="list-meta-item"
                  ><i class="fas fa-clock"></i> 2018</span
                >
                <a href="#" class="list-meta-item"
                  ><i class="fas fa-star"></i> 8.8</a
                >
              </span>
              <p>
                As the Avengers and their allies have continued to protect the
                world from threats too large for any one hero to handle, a new
                danger has emerged from the cosmic shadows: Thanos.
              </p>
            </div>
          </div>
        </div>
        <div class="col-sm-6 col-xs-6">
          <div class="list mb-2">
            <div class="list-header">
              <a href="single-movie.html" class="list-header-image">
                <img
                  src="https://image.tmdb.org/t/p/w600_and_h900_bestv2/to0spRl1CMDvyUbOnbb4fTk3VAd.jpg"
                />
              </a>
            </div>
            <div class="list-content">
              <h2>
                <a href="single-movie.html" class="text-black">Deadpool 2</a>
              </h2>
              <span class="list-meta">
                <span class="list-meta-item"
                  ><i class="fas fa-clock"></i> 2018</span
                >
                <a href="#" class="list-meta-item"
                  ><i class="fas fa-star"></i> 8.3</a
                >
              </span>
              <p>
                Wisecracking mercenary Deadpool battles the evil and powerful
                Cable and other bad guys to save a boy's life.
              </p>
            </div>
          </div>
        </div>
        <div class="col-sm-6 col-xs-6">
          <div class="list mb-2">
            <div class="list-header">
              <a href="single-movie.html" class="list-header-image">
                <img
                  src="https://image.tmdb.org/t/p/w600_and_h900_bestv2/uxzzxijgPIY7slzFvMotPv8wjKA.jpg"
                />
              </a>
            </div>
            <div class="list-content">
              <h2>
                <a href="single-movie.html" class="text-black">Black Panther</a>
              </h2>
              <span class="list-meta">
                <span class="list-meta-item"
                  ><i class="fas fa-clock"></i> 2018</span
                >
                <a href="#" class="list-meta-item"
                  ><i class="fas fa-star"></i> 7.6</a
                >
              </span>
              <p>
                King T'Challa returns home from America to the reclusive,
                technologically advanced African nation of Wakanda to serve as
                his country's new leader. However, T'Challa soon finds that he
                is challenged for the throne by factions within his own country
                as well as without.
              </p>
            </div>
          </div>
        </div>
        <div class="col-sm-6 col-xs-6">
          <div class="list mb-2">
            <div class="list-header">
              <a href="single-movie.html" class="list-header-image">
                <img
                  src="https://image.tmdb.org/t/p/w600_and_h900_bestv2/jjPJ4s3DWZZvI4vw8Xfi4Vqa1Q8.jpg"
                />
              </a>
            </div>
            <div class="list-content">
              <h2><a href="#" class="text-black">Fifty Shades Freed</a></h2>
              <span class="list-meta">
                <span class="list-meta-item"
                  ><i class="fas fa-clock"></i> 2018</span
                >
                <a href="#" class="list-meta-item"
                  ><i class="fas fa-star"></i> 4.4</a
                >
              </span>
              <p>
                A young Silicon Valley tech-titan enlists a veteran surgeon with
                a controversial past in starting a hospital with a cutting-edge,
                new school approach to medicine.
              </p>
            </div>
          </div>
        </div>
        <div class="col-sm-6 col-xs-6">
          <div class="list mb-2">
            <div class="list-header">
              <a href="single-movie.html" class="list-header-image">
                <img
                  src="https://image.tmdb.org/t/p/w600_and_h900_bestv2/vLCogyfQGxVLDC1gqUdNAIkc29L.jpg"
                />
              </a>
            </div>
            <div class="list-content">
              <h2>
                <a href="single-movie.html" class="text-black">Red Sparrow</a>
              </h2>
              <span class="list-meta">
                <span class="list-meta-item"
                  ><i class="fas fa-clock"></i> 2018</span
                >
                <a href="single-movie.html" class="list-meta-item"
                  ><i class="fas fa-star"></i> 6.7</a
                >
              </span>
              <p>
                Prima ballerina, Dominika Egorova faces a bleak and uncertain
                future after she suffers an injury that ends her career. She
                soon turns to Sparrow School, a secret intelligence service that
                trains exceptional young people to use their minds and bodies as
                weapons.
              </p>
            </div>
          </div>
        </div>
        <div class="col-sm-6 col-xs-6">
          <div class="list mb-2">
            <div class="list-header">
              <a href="single-movie.html" class="list-header-image">
                <img
                  src="https://image.tmdb.org/t/p/w600_and_h900_bestv2/30oXQKwibh0uANGMs0Sytw3uN22.jpg"
                />
              </a>
            </div>
            <div class="list-content">
              <h2>
                <a href="single-movie.html" class="text-black">Rampage</a>
              </h2>
              <span class="list-meta">
                <span class="list-meta-item"
                  ><i class="fas fa-clock"></i> 2018</span
                >
                <a href="#" class="list-meta-item"
                  ><i class="fas fa-star"></i> 6.4</a
                >
              </span>
              <p>
                Primatologist Davis Okoye shares an unshakable bond with George,
                the extraordinarily intelligent, silverback gorilla who has been
                in his care since birth. But a rogue genetic experiment gone
                awry mutates this gentle ape into a raging creature of enormous
                size.
              </p>
            </div>
          </div>
        </div>
        <div class="col-sm-6 col-xs-6">
          <div class="list mb-2">
            <div class="list-header">
              <a href="single-movie.html" class="list-header-image">
                <img
                  src="https://image.tmdb.org/t/p/w600_and_h900_bestv2/pU1ULUq8D3iRxl1fdX2lZIzdHuI.jpg"
                />
              </a>
            </div>
            <div class="list-content">
              <h2>
                <a href="single-movie.html" class="text-black"
                  >Ready Player One</a
                >
              </h2>
              <span class="list-meta">
                <span class="list-meta-item"
                  ><i class="fas fa-clock"></i> 2018</span
                >
                <a href="#" class="list-meta-item"
                  ><i class="fas fa-star"></i> 8.8</a
                >
              </span>
              <p>
                When the creator of a popular video game system dies, a virtual
                contest is created to compete for his fortune.
              </p>
            </div>
          </div>
        </div>
        <div class="col-sm-6 col-xs-6">
          <div class="list mb-2">
            <div class="list-header">
              <a href="single-movie.html" class="list-header-image">
                <img
                  src="https://image.tmdb.org/t/p/w600_and_h900_bestv2/85R8LMyn9f2Lev2YPBF8Nughrkv.jpg"
                />
              </a>
            </div>
            <div class="list-content">
              <h2>
                <a href="single-movie.html" class="text-black">Game Night</a>
              </h2>
              <span class="list-meta">
                <span class="list-meta-item"
                  ><i class="fas fa-clock"></i> 2018</span
                >
                <a href="#" class="list-meta-item"
                  ><i class="fas fa-star"></i> 6.2</a
                >
              </span>
              <p>
                Max and Annie's weekly game night gets kicked up a notch when
                Max's brother Brooks arranges a murder mystery party -- complete
                with fake thugs and federal agents. So when Brooks gets
                kidnapped, it's all supposed to be part of the game.
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </main>
    <!-- /movie cards -->
    <br />
    <!-- Newsletter -->

    <!-- /Newsletter -->
    <!-- Footer -->
    <footer class="footer">
      <div class="container">
        <div class="row">
          <div class="col-lg-6 h-100 text-center text-lg-left my-auto">
            <ul class="list-inline mb-2">
              <li class="list-inline-item">
                <a href="page.html">About us</a>
              </li>
              <li class="list-inline-item">&sdot;</li>
              <li class="list-inline-item">
                <a href="page.html">Refunds</a>
              </li>
              <li class="list-inline-item">&sdot;</li>
              <li class="list-inline-item">
                <a href="page.html">Terms and Privacy</a>
              </li>
              <li class="list-inline-item">&sdot;</li>
              <li class="list-inline-item">
                <a href="contact.html">Contact</a>
              </li>
            </ul>
            <p class="small mb-4 mb-lg-0">
              Omar Ahmad&copy; 2018. All Rights Reserved.
            </p>
          </div>
          <div class="col-lg-6 h-100 text-center text-lg-right my-auto">
            <ul class="list-inline mb-0">
              <li class="list-inline-item mr-3">
                <a href="https://linkedin.com/in/byalk" class="footer-fb">
                  <i class="fab fa-linkedin fa-2x fa-fw"></i>
                </a>
              </li>
              <li class="list-inline-item mr-3">
                <a href="#" class="footer-tw">
                  <i class="fab fa-twitter fa-2x fa-fw"></i>
                </a>
              </li>
              <li class="list-inline-item">
                <a href="#" class="footer-in">
                  <i class="fab fa-instagram fa-2x fa-fw"></i>
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </footer>
    <!-- /Footer -->

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script
      src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
      integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"
      integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"
      integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm"
      crossorigin="anonymous"
    ></script>
    <script src="script.js"></script>
  </body>
</html>
Tags:

2

Answers


  1. 0

    You have two variables named ‘main’, one is the getElementById and the other is from the forEach loop. Change one and it should work

    const BASE_URL = "https://api.themoviedb.org/3";
const API_URL = BASE_URL + "/discover/movie?sort_by=popularity.desc&" + API_KEY;
const IMG_URL = "https://image.tmdb.org/t/p/w500";

const mainEl = document.getElementById("main");
getMovies(API_URL);

function getMovies(url) {
  fetch(url)
    .then((res) => res.json())
    .then((data) => {
      console.log(data.results);
      showMovies(data.results);
    });
}

function showMovies(data) {
  main.innerHTML = " ";

  data.forEach((main) => {
    const { title, vote_average, overview, poster_path } = main;

    const movieEl = document.createElement("div");
    movieEl.classList.add("movie");
    movieEl.innerHTML = `
  
                <img
                  src="${IMG_URL + poster_path} alt-""${title}"
                />
              </a>
            </div>
            <div class="list-content">
              <h2>
                <a href="single-movie.html" class="text-black"
                  ></a
                >
              </h2>
              <span class="list-meta">
                <span class="list-meta-item"
                  ><i class="fas fa-clock"></i> 2018</span
                >
                <a href="#" class="list-meta-item"
                  ><i class="fas fa-star"></i> ${vote_average}</a
                >
              </span>
              <p>
                ${overview}
              </p>
            </div>
          
    `;

    mainEl.appendChild(movieEl);
  });
}

    Sandbox Code

    Login or Signup to reply.
  2. 0

    In the forEach loop you are declaring each array item as ‘main’.
    Therefore main.appendChild() is called upon the array item, not on the HTML element.

    Change the item name in the forEach loop to something like ‘movie’, and then ofcourse also in the first line of the loop.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search