Retrieving data from api using ajax/vanilla javascript

Question

Good day everyone please am trying to create a movie project using just javacript and ajax without fetch,jquery etc, i have a bug, if i enter a word in the inputbox and submit to retrieve an array of movies from the api for the first time it works but if i try searching for other movies again it doesn't work accept i reload the page. please doee anyone have a solution to this bug? thanks

document.getElementById("searchForm").addEventListener("submit", loadMovies);

function loadMovies(e) {
  let input = document.getElementById("searchText");
  const xhr = new XMLHttpRequest();
  xhr.open("GET", `https://api.themoviedb.org/3/search/movie?api_key=b94d8dbb7dcd23af16414e00a058c9ad&language=en-US&query=${input.value}`, true);
  xhr.onload = function() {
    if (this.status === 200) {
      let movies = document.getElementById("movies");
      let res = JSON.parse(this.responseText);
      res.results.forEach(function(movie) {
        movies.innerHTML += `
                        <div class="col-md-3">
                            <div class="card bg-dark">
                                <div class="card-block">
                                    <img src="https://image.tmdb.org/t/p/w500${movie.poster_path}" class="img-fluid">
                                    <h4>${movie.title}</h4>
                                    <a href="#" class="btn btn-primary">Movie Details</a>
                                </div>
                            </div>
                        </div>
                    `;
      });
    } else {
      console.log("Movie not found");

    }

  }

  xhr.send();

  e.preventDefault();
}

<div class="container mt-5">
  <div class="jumbotron bg-dark">
    <h3 class="text-center">Search For Any Movie</h3>
    <form id="searchForm">
      <input type="text" class="form-control" id="searchText" placeholder="Search Movie....">
    </form>
  </div>
</div>

<div class="container">
  <div id="movies" class="row"></div>
</div>

Can you share any errors from the console or create at fiddle with your code? — pixelarbeit
– pixelarbeit, Commented Dec 21, 2017 at 9:37
It looks like it's just appending them to the bottom of the list, so you'll need to clear the innerHTML first — user184994
– user184994, Commented Dec 21, 2017 at 9:37
Works perfectly. It fetches the results and appends them to #movies. If you don't want them to append to the div you must clear it before as @user184994 stated — pixelarbeit
– pixelarbeit, Commented Dec 21, 2017 at 9:39
it doesn't give any error on the console, and i tried clearing the innerHTML of the #movie it stops retrieving the data — baezl
– baezl, Commented Dec 21, 2017 at 9:50

Nope · Accepted Answer · 2017-12-21 09:44:30Z

I didn't realize there was many results you wanted to display. In that case use += off course and just empty the result beforehand movies.innerHTML = ''

document.getElementById("searchForm").addEventListener("submit", loadMovies);

function loadMovies(e) {
  let input = document.getElementById("searchText");
  const xhr = new XMLHttpRequest();
  xhr.open("GET", `https://api.themoviedb.org/3/search/movie?api_key=b94d8dbb7dcd23af16414e00a058c9ad&language=en-US&query=${input.value}`, true);
  xhr.onload = function() {
    if (this.status === 200) {
      let movies = document.getElementById("movies");
      let res = JSON.parse(this.responseText);
      movies.innerHTML = '';
      res.results.forEach(function(movie) {
        movies.innerHTML += `
                        <div class="col-md-3">
                            <div class="card bg-dark">
                                <div class="card-block">
                                    <img src="https://image.tmdb.org/t/p/w500${movie.poster_path}" class="img-fluid">
                                    <h4>${movie.title}</h4>
                                    <a href="#" class="btn btn-primary">Movie Details</a>
                                </div>
                            </div>
                        </div>
                    `;
      });
    } else {
      console.log("Movie not found");

    }

  }

  xhr.send();

  e.preventDefault();
}

<div class="container mt-5">
  <div class="jumbotron bg-dark">
    <h3 class="text-center">Search For Any Movie</h3>
    <form id="searchForm">
      <input type="text" class="form-control" id="searchText" placeholder="Search Movie....">
    </form>
  </div>
</div>

<div class="container">
  <div id="movies" class="row"></div>
</div>

Collectives™ on Stack Overflow

Retrieving data from api using ajax/vanilla javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related