Reputation: 13

Movie searching site using TMDb and axios npm

I'm trying to make a movie searching site using TMDb and axios npm. What am I doing wrong? Search works fine, but I can't access the movies themselves.

$(document).ready(() => {
  $('#searchForm').on('submit', (e) => {
    let searchText = $('#searchText').val();
    getMovies(searchText);
    e.preventDefault();
  });
});

function getMovies(searchText) {
  axios.get('https://api.themoviedb.org/3/search/movie?api_key=d80a54a0422d5fff6149c48741c8bece&language=en-US&query=' + searchText)
    .then((response) => {
      console.log(response);
      let movies = response.data.Search;
      let output = '';
      $.each(movies, (index, movie) => {
        output += `
          <div class="col-md-3">
            <div class="well text-center">
              <img src="${movie.poster_path}">
              <h5>${movie.original_title}</h5>
              <a onclick="https://www.themoviedb.org/movie/('${movie.id}')" class="btn btn-primary" href="#">Movie Details</a>
            </div>
          </div>
        `;
      });

      $('#movies').html(output);
    })
    .catch((err) => {
      console.log(err);
    });
}

function movieSelected(id) {
  sessionStorage.setItem('id', id);
  window.location = 'movie.html';
  return false;
}

function getMovie() {
  let id = sessionStorage.getItem('id');

  axios.get('https://api.themoviedb.org/3/movie/' + id + '?api_key=d80a54a0422d5fff6149c48741c8bece&language=en-US')
    .then((response) => {
      console.log(response);
      let movie = response.data;

      let output = `
        <div class="row">
          <div class="col-md-4">
            <img src="${movie.Poster}" class="thumbnail">
          </div>
          <div class="col-md-8">
            <h2>${movie.Title}</h2>
            <ul class="list-group">
              <li class="list-group-item"><strong>Genre:</strong> ${movie.genres.Name}</li>
              <li class="list-group-item"><strong>Released:</strong> ${movie.release_date}</li>
              <li class="list-group-item"><strong>Rated:</strong> ${movie.vote_average}</li>
              <li class="list-group-item"><strong>Review:</strong> ${movie.overview}</li>
            </ul>
          </div>
        </div>
        <div class="row">
          <div class="well">
            <h3>Plot</h3>
            ${movie.Plot}
            <hr>
            <a href="http://imdb.com/title/${movie.imdbID}" target="_blank" class="btn btn-primary">View TMDb</a>
            <a href="index.html" class="btn btn-default">Go Back To Search</a>
          </div>
        </div>
      `;

      $('#movie').html(output);
    })
    .catch((err) => {
      console.log(err);
    });
}

#movies img,
#movie img {
  width: 100%;
}

@media(min-width:960px) {
  #movies .col-md-3 .well {
    height: 390px;
  }
  #movies .col-md-3 img {
    height: 240px;
  }
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>MovieInfo</title>
  <link href="css/bootstrap.min.css" rel="stylesheet" />
  <link href="css/style.css" rel="stylesheet" />
</head>

<body>
  <nav class="navbar navbar-default">
    <div class="container">
      <div class="navbar-header">
        <a class="navbar-brand" href="index.html">MovieInfo</a>
      </div>
    </div>
  </nav>

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

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

  <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script src="js/main.js"></script>
</body>

</html>

--More details, because I have more code:

Search works fine, but I can't access the movies themselves. Search works fine, but I can't access the movies themselves. Search works fine, but I can't access the movies themselves. Search works fine, but I can't access the movies themselves.

Upvotes: 0

Answers (2)

faso-dev

Reputation: 183

Just replace response.data.Search by response.data.results

$(document).ready(() => {
  $('#searchForm').on('submit', (e) => {
    let searchText = $('#searchText').val();
    getMovies(searchText);
    e.preventDefault();
  });
});

function getMovies(searchText) {
  axios.get('https://api.themoviedb.org/3/search/movie?api_key=d80a54a0422d5fff6149c48741c8bece&language=en-US&query=' + searchText)
    .then((response) => {
      console.log(response);
      let movies = response.data.results;
      let output = '';
      $.each(movies, (index, movie) => {
        output += `
          <div class="col-md-3">
            <div class="well text-center">
              <img src="${movie.poster_path}">
              <h5>${movie.original_title}</h5>
              <a onclick="https://www.themoviedb.org/movie/('${movie.id}')" class="btn btn-primary" href="#">Movie Details</a>
            </div>
          </div>
        `;
      });

      $('#movies').html(output);
    })
    .catch((err) => {
      console.log(err);
    });
}

function movieSelected(id) {
  sessionStorage.setItem('id', id);
  window.location = 'movie.html';
  return false;
}

function getMovie() {
  let id = sessionStorage.getItem('id');

  axios.get('https://api.themoviedb.org/3/movie/' + id + '?api_key=d80a54a0422d5fff6149c48741c8bece&language=en-US')
    .then((response) => {
      console.log(response);
      let movie = response.data;

      let output = `
        <div class="row">
          <div class="col-md-4">
            <img src="${movie.Poster}" class="thumbnail">
          </div>
          <div class="col-md-8">
            <h2>${movie.Title}</h2>
            <ul class="list-group">
              <li class="list-group-item"><strong>Genre:</strong> ${movie.genres.Name}</li>
              <li class="list-group-item"><strong>Released:</strong> ${movie.release_date}</li>
              <li class="list-group-item"><strong>Rated:</strong> ${movie.vote_average}</li>
              <li class="list-group-item"><strong>Review:</strong> ${movie.overview}</li>
            </ul>
          </div>
        </div>
        <div class="row">
          <div class="well">
            <h3>Plot</h3>
            ${movie.Plot}
            <hr>
            <a href="http://imdb.com/title/${movie.imdbID}" target="_blank" class="btn btn-primary">View TMDb</a>
            <a href="index.html" class="btn btn-default">Go Back To Search</a>
          </div>
        </div>
      `;

      $('#movie').html(output);
    })
    .catch((err) => {
      console.log(err);
    });
}

#movies img,
#movie img {
  width: 100%;
}

@media(min-width:960px) {
  #movies .col-md-3 .well {
    height: 390px;
  }
  #movies .col-md-3 img {
    height: 240px;
  }
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>MovieInfo</title>
  <link href="css/bootstrap.min.css" rel="stylesheet" />
  <link href="css/style.css" rel="stylesheet" />
</head>

<body>
  <nav class="navbar navbar-default">
    <div class="container">
      <div class="navbar-header">
        <a class="navbar-brand" href="index.html">MovieInfo</a>
      </div>
    </div>
  </nav>

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

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

  <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script src="js/main.js"></script>
</body>

</html>

Upvotes: 0

Mujibur Rehman Ansari

Reputation: 663

This will help you click here, Now it is working. There was very small bug, which I mentioned to you.

And also fixed the image not showing issue.

Upvotes: 0

Movie searching site using TMDb and axios npm

Answers (2)

Related Questions