Объединить массивы, используя jquery

Question

Я звоню через Web API https://jsonmock.hackerrank.com/api/movies/search/?Title=spiderman. Возвращает Ответ на запрос с веб-сайта представляет собой ответ JSON со следующими пятью полями: page, per_page, total, total_pages и data.

Данные - это массив JSON объектов, содержащих информацию о mov ie, где поле Title обозначает заголовок mov ie.

. Обратите внимание, что это поле разбито на страницы, поэтому в Чтобы включить нумерацию страниц, вы должны запросить https://jsonmock.hackerrank.com/api/movies/search/?Title=substr&page=pageNumber, где pageNumber - это целое число, обозначающее страницу, которую вы хотите просмотреть (например, 1, 2, et c.).

Я пытаюсь объединить все фильмы в массив. Код ниже не работает. Можете ли вы помочь?

<script>
    $(document).ready(function () {
        $(function () {
            $("#getPeople").click(function (e) {
                console.log('calling function');
                $.ajax({
                    contentType: 'application/json',
                    type: "GET",
                    url: "https://jsonmock.hackerrank.com/api/movies/search/?Title=spiderman",
                    success: function (data, textStatus, jqXHR) {
                        console.log(data);

                        var totalPages = data.total_pages;
                        console.log(totalPages);


                        var listmovies = data.data;

                        console.log(listmovies.toString());

                        for (var i = 2; i <= totalPages; i++) {
                            console.log('calling loop');
                            $.ajax({
                                contentType: 'application/json',
                                type: "GET",
                                url: "https://jsonmock.hackerrank.com/api/movies/search/?Title=spiderman&page=" + i,
                                success: function (data, textStatus, jqXHR) {
                                     listmovies = [...listmovies, ...data.data];
                                },
                                error: function (jqXHR, textStatus, errorThrown) {
                                    $("#getPeopleResult").val(jqXHR.statusText);
                                }
                            });
                        }

                        console.log(listmovies.length);

                        for (var j = 0; j < listmovies.length; j++) {
                            console.log(listmovies[j].Title);
                        }
                    },
                    error: function (jqXHR, textStatus, errorThrown) {
                        $("#getPeopleResult").val(jqXHR.statusText);
                    }
                });
            });
        });
    });
</script>


  [1]: https://jsonmock.hackerrank.com/api/movies/search/?Title=spiderman

Answer 1

Вы только что перепутали себя со слишком большим количеством вызовов функций, циклов и журналов. И / или асинхронное программирование, которое является сутью AJAX, сбило вас с толку. Функция действительно намного проще. Приведенный ниже код может быть упрощен / разбит на функции для дальнейшего рефакторинга, но я оставлю это вам.

Что касается асинхронности, я рекомендую прочитать больше об асинхронном программировании на Eloquent * 1016. * или, что еще лучше, получите себе копию Вы не знаете JS: Syn c и Asyn c от Кайла Симпсона.

$(function () {
  $.ajax({
      contentType: 'application/json',
      type: "GET",
      url: "https://jsonmock.hackerrank.com/api/movies/search/?Title=spiderman",
      success: function (data, textStatus, jqXHR) {
          var totalPages = data.total_pages;
          for (var i = 1; i <= totalPages; i++) {
              // You fell into the Javascript Async trap here.. Don't expect JS to process your code in the same order as you typed it
              $.ajax({
                  contentType: 'application/json',
                  type: "GET",
                  url: "https://jsonmock.hackerrank.com/api/movies/search/?Title=spiderman&page=" + i,
                  success: function (data, textStatus, jqXHR) {
                       // Just print out the result, no need to save it into another variable
                       printMovieList(data.data);
                  },
                  error: function (jqXHR, textStatus, errorThrown) {
                      $("#errors").val(jqXHR.statusText);
                  }
              });
          }
      },
      error: function (jqXHR, textStatus, errorThrown) {
          $("#errors").val(jqXHR.statusText);
      }
  });
});
function printMovieList(listmovies) {
    for (var j = 0; j < listmovies.length; j++) {
        $('#movie_list').append('<li>'+listmovies[j].Title+'</li>');
    }
}

#errors {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="errors"></div>
<ol id="movie_list"></ol>