Displaying Ajax list

Question

I want to display a list of all movies shown when i search for a specific movie.Right now it only lists them like array.I want to see the title, poster, year its filmed etc This is my code.Its my first time working with api. Thanks to all who will reply.

$(document).ready(function() {
  $('#formSubmit').click(function(e) {

    let txtSearch = $('#txtSearch').val();
    getMovies(txtSearch);
    e.preventDefault();
  });
});

function getMovies(txtSearch) {
  $.get('http://www.omdbapi.com/?apikey=KEY&s=' + txtSearch, function(txtSearch) {
    console.log(txtSearch);
    //This is where the request goes//
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<form action="" method="GET">
  <div class="row">
    <div class="col-lg-6 col-xs-6 col-md-4 col-lg-offset-3" id="searchForm">
      <p class="header">Search movie by title</p>
      <div class="input-group">
        <input type="text" class="form-control" placeholder="Enter movie name" id="txtSearch" />
        <div class="input-group-btn">
          <button class="btn btn-primary" type="submit" id="formSubmit">
                            <span class="glyphicon glyphicon-search"></span>
                        </button>
        </div>
      </div>
    </div>
  </div>
</form>

Answer 1

Once you have your results via the jQuery $.get(url, callback(res)) function you can start to process the results. In the example below I made a new function, handleResults(results), which I use to loop over the results from the API request.

In handleResults I loop over each results.Search object and pull the title, year, and the poster from the object and assign them to a cloned object ( var main = $('.result:first-child').clone(); ). Once all the assignments have been made we can append the cloned object into the view and remove the hidden class so it can be seen.

I removed the hardcoded API key from the code as it is not good to share those publicly. I added a box you can input the Key though so the snippet will work.

$(document).ready(function() {
  $('#formSubmit').click(function(e) {

    let txtSearch = $('#txtSearch').val();
    getMovies(txtSearch);
    e.preventDefault();
  });
});

function getMovies(txtSearch) {
  var key = $('.api-key').val();
  $.get('http://www.omdbapi.com/?apikey='+key+'&s=' + txtSearch, handleResults);
}

function handleResults(results) {
  results.Search.forEach(function(res) {
    var main = $('.result:first-child').clone();
    $('.title', main).text(`${res.Title} (${res.Year})`);
    $('.img', main).attr('src', res.Poster);
    main.appendTo('.results').removeClass('hidden');
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<form action="" method="GET">
  <div class="row">
    <div class="col-lg-6 col-xs-6 col-md-4 col-lg-offset-3" id="searchForm">
      <p class="header">Search movie by title</p>
      <div class="input-group">
        <input type="text" class="form-control api-key" placeholder="API Key" />
        <input type="text" class="form-control" placeholder="Enter movie name" id="txtSearch" />
        <div class="input-group-btn">
          <button class="btn btn-primary" type="submit" id="formSubmit">
           <span class="glyphicon glyphicon-search"></span>
          </button>
        </div>
      </div>
    </div>
  </div>
</form>

<div class="row results">
  <div class="col-md-12 result hidden">
    <h3 class="title"></h3>
    <img class="img" src="" />
  </div>
</div>