Question 311727 in Html Question posted in
Some basic documentation can be found here.

Html – I'm building my first website using an API, not sure why I'm pulling an error

I am using OMDb API to build a movie search platform for some practise in VS Code. I was watching a video and my syntax is almost identical, I am successfully pulling the data in a promise. Now when I go to use .map() to change the innerHTML, I’m pulling an error.

async function main() {
  const movie = await fetch("https://www.omdbapi.com/?i=tt3896198&apikey=ba040381");
  const movieData = await movie.json();
  const movieListEl = document.querySelector(".movie__list");

  console.log(movieData) // to prove data is being pulled

  movieListEl.innerHTML = movieData
    .map(
      (movie) =>
        `<div class="movie__card">
          <div class="movie__card--container">
            <h3>${movie.title}</h3>
            <p><b>Year:</b>0000</p>
            <p><b>Rating:</b>xxxxx</p>
            <p><b>Runtime:</b>xxxxx</p>
            <p><b>Genre:</b>xxxxx</p>
          </div>
        </div>`
    )
    .join("");
}

main();

This is not perfect by any means, but in the video this syntax seemed to work perfectly before cleaning up the code and making it easier to read by creating a separate function to change the HTML

I’m very lost and had reached out for some help in this discord channel I’m in with unfortunately no luck. I am very new to JavaScript—and using APIs for that matter. Any feedback is very much appreciated.

Tags:

2

Answers


  1. 0

    You are getting error because movieData is an object and you cannot use map() method on the object in JavaScript. If movieData is an Array then you can use map() method to iterate over the array elements.

    Login or Signup to reply.
  2. 0

    The response is not array, response is only one object and you don’t need to iterate, you need distructure object or accees object values directy.

    const {Title, Year, Genre, Runtime, Ratings} = movieData

    Or

    movieData.Title, movieData.Genre ....

    Then show result

    movieListEl.innerHTML = `<div class="movie__card">
      <div class="movie__card--container">
        <h3>${Title}</h3>
        <p><b>Year:</b>000</p>
        <p><b>Rating:</b>xxxxx</p>
        <p><b>Runtime:</b>xxxxx</p>
        <p><b>Genre:</b>xxxxx</p>
      </div>
    </div>`
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search