Отображение списка Ajax

Question

Я хочу отобразить список всех фильмов, показанных при поиске конкретного фильма. Прямо сейчас он отображает их только как массив. Я хочу видеть title, poster, year его снятый и т. Д. Этоэто мой код. Это мой первый раз, когда я работаю с API.Спасибо всем, кто ответит.

$(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

Получив результаты с помощью функции jQuery $.get(url, callback(res)), вы можете приступить к обработке результатов. В приведенном ниже примере я создал новую функцию handleResults(results), которую я использую для циклического отображения результатов запроса API.

В handleResults я зацикливаюсь на каждом results.Search объекте, извлекаю из объекта заголовок, год и плакат и назначаю их клонированному объекту (var main = $('.result:first-child').clone();). После выполнения всех назначений мы можем добавить клонированный объект в представление и удалить класс hidden, чтобы его можно было увидеть.

Я удалил жестко закодированный ключ API из кода, так как нецелесообразно делиться ими публично. Я добавил поле, в которое можно ввести ключ, чтобы фрагмент работал.

$(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>