Question

我正在使用http://swapi.co/ API和Angular。我试图在一个页面上显示所有字符。问题是，字符列表由不同页面分隔，例如：http://swapi.co/api/people/?page=1，http://swapi.co/api/people/?page=2等。

响应在JSON响应中有一个下一个和上一个对象，例如：

"next": "http://swapi.co/api/people/?page=3", 
"previous": "http://swapi.co/api/people/?page=1", 
"results": [
    {
        "name": "Anakin Skywalker", 
        "height": "188", 
        "mass": "84",

我想将这些页面串在一个对象中，以便我可以在一个页面下显示所有字符，我假设逻辑将包括我检查“下一个”对象何时==为null然后停止递增页面编号并向API发出请求。我是Angular以及REST的新手，非常感谢任何给予的帮助，谢谢。我目前正在使用我的代码，以便当用户点击下一个按钮时，它会发出一个新请求，并将我的值变量递增一个，该函数将在具有该新值的函数中返回。这不是我想要做的事情，更多的是学习测试，看看我是否可以。这是我的Controller.js：

/*global angular:true */
angular.module('F1FeederApp.controllers', []).
/* characters controller */
controller('charactersController', function($scope, starwarsAPIservice) {
$scope.nameFilter = null;
$scope.characterList = [];
$scope.searchFilter = function (character) {
    var re = new RegExp($scope.nameFilter, 'i');
    return !$scope.nameFilter || re.test(character.name) || re.test(character.gender);
};

starwarsAPIservice.getCharacters().success(function (response) {
    $scope.loading = true;
    console.log($scope.loading);
    var check = response;
    $scope.characterList = response.results;
    return check;
}).then(function successCallback(check){
    var val = 1;
    if(check.next !== null){
      val++;
      console.log('More pages to be loaded');
    }else {
      console.log('No More pages to be loaded');
    }
}).finally(function(){
  $scope.loading = false;
  console.log($scope.loading);
});
var value = 1;
$('.previouspage').addClass('hidden');
$('button').on('click', function(){
  if($(this).hasClass('nextpage')){
    value++;
    if(value <= 1){
      $('.previouspage').addClass('hidden');
    }else{
      $('.previouspage').removeClass('hidden');
    }
    console.log(value);
    starwarsAPIservice.getChar(value).success(function (response) {
        $scope.characterList = response.results;
    });
      }
      else {
        value--;
        if(value <= 1){
          $('.previouspage').addClass('hidden');
        }else{
          $('.previouspage').removeClass('hidden');
        }
        console.log(value);
        starwarsAPIservice.getChar(value).success(function (response) {
        $scope.characterList = response.results;
    });
  }
});


}).

  /* character controller */
   controller('characterController', function($scope, $routeParams, starwarsAPIservice) {
$scope.id = $routeParams.id;
$scope.character = [];
$scope.planet = [];

starwarsAPIservice.getCharacterDetails($scope.id).success(function (response) {
    $scope.character = response;
});

starwarsAPIservice.getCharacterPlanet($scope.id).success(function (response) {
    $scope.planet = response;
});

});

这是我的service.js文件：

/*global angular:true */
angular.module('F1FeederApp.services', [])
 .factory('starwarsAPIservice', function($http) {

var ergastAPI = {};

ergastAPI.getCharacters = function(){
    return $http.get('http://swapi.co/api/people/');
};
ergastAPI.getChar = function(value){
    return $http.get('http://swapi.co/api/people/?page='+value+'');
};
ergastAPI.getCharacterDetails = function(id){
    return $http.get('http://swapi.co/api/people/'+id+'/?format=json');
};
ergastAPI.getCharacterPlanet = function(id){
    return $http.get('http://swapi.co/api/planets/'+id+'/?format=json');
};

return ergastAPI;
});

使用Angular，我的API有对象的serval页面，我想调用它们所有并将它们全部加入到一个对象中

0 个答案: