Saya membuat beberapa pemetaan dengan moviedb api menggunakan innerhtml, masalah yang saya alami adalah dengan Main.appendChild di mana appendChild ditangani sebagai properti dan bukan sebagai fungsi. Saya mengalami masalah yang sama di konsol dengan seluruh array utama dan saya pikir itu mungkin ada hubungannya dengan fakta bahwa saya mendeklarasikan objek utama ke htmlelement kemudian ke array. Btw saya sudah menyerah pada proyek ini karena itu tidak sepadan dengan waktu ekstra yang dibutuhkan ini semacam bagian pengisi jadi maafkan saya.

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>
0
Wasted-O453 Ahmad 21 September 2021, 22:14

2 jawaban

Jawaban Terbaik

Anda memiliki dua variabel bernama 'main', satu adalah getElementById dan yang lainnya dari loop forEach. Ubah satu dan itu akan berhasil

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

Kode Sandbox

0
gilbert frausto 21 September 2021, 19:40

Dalam loop forEach Anda mendeklarasikan setiap item array sebagai 'utama'. Oleh karena itu main.appendChild() dipanggil pada item array, bukan pada elemen HTML.

Ubah nama item di loop forEach menjadi sesuatu seperti 'film', dan tentu saja juga di baris pertama loop.

0
rwdev 21 September 2021, 19:53