简体   繁体   English

使用angularjs使用Restful API时如何使用多个$ http对数据进行排序和匹配

[英]How to sort and match data with multiple $http when Consume Restful APIs with angularjs

So following my last question of how to consume multiple $http, I need also to sort the data and match them. 因此,在最后一个关于如何使用多个$ http的问题之后,我还需要对数据进行排序和匹配。 It's mean, I have the Albums, Photos and users: 意思是,我有相册,照片和用户:

http://jsonplaceholder.typicode.com/albums http://jsonplaceholder.typicode.com/albums

http://jsonplaceholder.typicode.com/photos http://jsonplaceholder.typicode.com/photos

http://jsonplaceholder.typicode.com/users http://jsonplaceholder.typicode.com/users

For each Album I need to display the owner name and number of photos. 对于每个相册,我需要显示所有者名称和照片数量。 So I try this to get the Album by Id, but it gives me error: 因此,我尝试通过ID获得相册,但这给了我错误:

$http.get('http://jsonplaceholder.typicode.com/albums/'+ $scope.id + '/photos')

Or I also try this: 或者我也尝试这样:

$http.get('http://jsonplaceholder.typicode.com/albums/'+ albumUsers.id + '/photos')

But still get error. 但是仍然会出错。

The question is if there's a way to link / create dependency between them, so the second controller basically rely on the first one? 问题是它们之间是否存在链接/创建依赖关系的方法,因此第二个控制器基本上依赖第一个控制器? Thanks 谢谢

So this is the controller to get the albums and the users 这是获取专辑和用户的控制器

MyAlbum.controller('albumList', function($scope, $http, $q) {
$http.get('http://jsonplaceholder.typicode.com/albums').
    then(function(response) {
        $scope.albumDetails = response.data;
    });

$http.get('http://jsonplaceholder.typicode.com/users').
    then(function(response) {
        $scope.albumUsers = response.data;
   });

$q.all(['http://jsonplaceholder.typicode.com/albums','http://jsonplaceholder.typicode.com/users',]).
    then(function(response){
        $scope.albumDetails = response[0].data;
        $scope.albumUsers= response[1].data;
});  

}); });

And this the controller to get each album - for the example, I'm using a link to one specific album: 这是获取每张专辑的控制器-例如,我正在使用一个特定专辑的链接:

MyAlbum.controller('photoList', function($scope, $http) {
$http.get('http://jsonplaceholder.typicode.com/albums/1/photos')
.then(function(response) {
    $scope.PhotoDetails = response.data;
});

}); });

The thing is that instead of albums/1 it should be albums/id 事实是,应该不是相册/ 1,而应该是相册/ id

You can chained the $http calls together.Success function of the first $http request calls the second $http request. 您可以将$http调用链接在一起,第一个$http请求的成功函数将调用第二个$http请求。

function firstCall() {   // It will return a promise.
    return $http({
        method: 'GET',
        url: firstAPIURL
    });
}

function dependantCall() {  // It will return a promise
    return $http({
        method: 'GET',
        url: secondAPIURL
    });
}

$scope.onloadRequest = function() {   // This function will execute on load the view/controller.
    firstCall()
     .then(function(result) {
        $scope.value = result.data; // Now that the server has answered, you can assign the value to $scope.value, and then, call the second function.

        dependantCall().then(function(dependentResult) {
            // Your code comes here
        }, function(dependentError){
             // If an error happened during the dependent call, handle it here.
        });

    }, function(error){ 
        // If an error happened during first call, handle it here.
    });
};

$scope.onloadRequest();

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM