How do I get the data from API using Javascript and Ajax?

Question

When I write something in the input and then press search I want to get the title from movies that has that word in it, how do I do that? Im using the omdb API. For example if I search for "Batman" I want to get all the movies titles that has "Batman" in it. Now when I search Batman I only get one Batman movie.

document.getElementById("getForm").addEventListener("submit", (e) => {
    e.preventDefault();
    loadMovies(document.querySelector("input[name='query']").value);
  });
  
  function loadMovies(name) {
    var omdbAPI = new XMLHttpRequest();
    var omdbURL = `http://www.omdbapi.com/?t=${name.replace(" ", "%20")}&type=movie&apikey=`;
    omdbAPI.open("get", omdbURL, true);
  
    omdbAPI.onload = function(event) {
      event.preventDefault();
  
      if (this.status == 200) {
        var result = JSON.parse(this.responseText);
  
        console.log(result);
  
        var output = "";
          output +=
            '<div class="user">' +
            '<h3>Titel: ' + result.Title + '</h3>' +
            '<p>Year: ' + result.Year + '</p>' +
            '</div>';
        document.getElementById('result').innerHTML = output;
      } else {
        alert("No results");
      }
    }
  
    omdbAPI.send();
  }

<form action="" method="get" id="getForm">
  Movie: <input type="text" name="query">
  <button type="submit">Search</button>
</form>

<div id="result">
            
</div>

Elite Coder · Accepted Answer · 2021-11-05 21:57:08Z

You aren't getting any results because OMDB requires an API key and you aren't providing one. When sending a proper GET request you receive the following response: {"Response":"False","Error":"No API key provided."}.

You are also reloading the page by allowing the default form submission action to occur, instead use event.preventDefault() to cancel the page reload from occurring when form submission occurs, then calling your function. I modified your function to include a name parameter to search with. The below should accomplish what you want, but since you don't have an API key you will still not get any results. Go here, to get an API key.

document.getElementById("getForm").addEventListener("submit", (e) => {
  e.preventDefault();
  loadMovies(document.querySelector("input[name='query']").value);
});

function loadMovies(name) {
  var omdbAPI = new XMLHttpRequest();
  var omdbURL = `http://www.omdbapi.com/?t=${name.replace(" ", "%20")}&type=movie`;
  omdbAPI.open("get", omdbURL, true);

  omdbAPI.onload = function(event) {
    event.preventDefault();

    if (this.status == 200) {
      var result = JSON.parse(this.responseText);

      console.log(result);

      var output = "";
      for (var i in result) {
        output +=
          '<div class="user">' +
          '<h3>Titel: ' + result.Title + '</h3>' +
          '</div>';
      }
      document.getElementById('result').innerHTML = output;
    } else {
      alert("No results");
    }
  }

  omdbAPI.send();
}

<form action="" method="get" id="getForm">
  Movie: <input type="text" name="query">
  <button type="submit">Search</button>
</form>

<div id="result">

</div>

Collectives™ on Stack Overflow

How do I get the data from API using Javascript and Ajax?

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