将Angular $ http.get调用对象分配给变量

Question

好吧，首先，我是相当新的Angular。 我试图使用$ http.get调用从CouchDB中获取所有文档（JSON对象）。 JSON对象基本上是一个人列表，其中包含ID，他们的名字和一些引号：

 { "total_rows": 2, "offset": 0, "rows": [ { "id": "5", "key": "5", "value": { "rev": "1-b26014051b18bce04ae2190d9cb92d81" }, "doc": { "_id": "5", "_rev": "1-b26014051b18bce04ae2190d9cb92d81", "dataid": "5", "dataname": "Robin", "dataquote": "Blah" } }, { "id": "9", "key": "9", "value": { "rev": "1-8ecbf37d0ccc129530e57747b46faa8e" }, "doc": { "_id": "9", "_rev": "1-8ecbf37d0ccc129530e57747b46faa8e", "dataid": "9", "dataname": "Bert", "dataquote": "Hallo" } } ] }

我想根据以下HTML显示每个人的姓名：

 <div> <p class="lead">Persons</p> <ul> <li ng-repeat="p in persons"><a ng-href="#/quotes/{{ p.doc.dataid }}">{{ p.doc.dataname }}</a></li> </ul> </div>

这是我正在使用的控制器和服务：

 .controller('personsCtrl', ['$scope', 'personSrv', function personsCtrl($scope, personSrv) { $scope.persons = personSrv.getAllpersons(); .factory('personSrv', ['$http', '$q', function ($http, $q) { return{ getAllpersons: function(){ return $http.get('http://localhost:5984/quotes/_all_docs?include_docs=true') .then(function(response){ if (typeof response.data === 'object'){ return response.data.rows; } else{ return $q.reject(response.data); } }, function(response){ return $q.reject(response.data); }); } }; }])

我检查了调试器，然后GET调用运行良好，但是问题是名称不会显示在浏览器的页面上。 我假设返回的数据没有正确分配给$ scope.persons var。

Answer 1

采用：

personSrv.getAllpersons().then(function(data){

  $scope.persons = data;

});

Answer 2

getAllpersons函数返回派生的promise，并通过response.data.rows解析。 需要使用promise的.then方法提取数据：

//$scope.persons = personSrv.getAllpersons();

var rowsPromise = personSrv.getAllpersons();

rowsPromise.then(function(rows){
    $scope.persons = rows;
});

Answer 3

传递成功处理程序以在发出http调用后运行，而不是返回承诺。

 .controller('personsCtrl', ['$scope', 'personSrv', function personsCtrl($scope, personSrv) { personSrv.getAllpersons(function(rows) { $scope.persons = rows; }); .factory('personSrv', ['$http', '$q', function ($http, $q) { return{ getAllpersons: function(success, fail){ $http.get('http://localhost:5984/quotes/_all_docs?include_docs=true') .then(function(response){ if (typeof response.data === 'object'){ if (success) { success(response.data.rows); } } else{ if (fail) { fail(response.data); } } }, function(response){ if (fail) { fail(response.data); } }); } }; }])

Answer 4

尝试$scope.persons = response.rows; 作为具有人员列表的rows数组。

 var myApp = angular.module('myApp',[]); function MyCtrl($scope) { var response = { "total_rows": 2, "offset": 0, "rows": [ { "id": "5", "key": "5", "value": { "rev": "1-b26014051b18bce04ae2190d9cb92d81" }, "doc": { "_id": "5", "_rev": "1-b26014051b18bce04ae2190d9cb92d81", "dataid": "5", "dataname": "Robin", "dataquote": "Blah" } }, { "id": "9", "key": "9", "value": { "rev": "1-8ecbf37d0ccc129530e57747b46faa8e" }, "doc": { "_id": "9", "_rev": "1-8ecbf37d0ccc129530e57747b46faa8e", "dataid": "9", "dataname": "Bert", "dataquote": "Hallo" } } ] }; $scope.persons = response.rows; }

 <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> </head> <body ng-app="myApp"> <div ng-controller="MyCtrl"> <p class="lead">Persons</p> <ul> <li ng-repeat="p in persons"><a ng-href="#/quotes/{{ p.doc.dataid }}">{{ p.doc.dataname }}</a></li> </ul> </div> </body> </html>

将Angular $ http.get调用对象分配给变量

问题描述

4 个解决方案

解决方案1
0 2016-11-01 19:53:11

解决方案2
0 2016-11-02 02:47:02

解决方案3
0 2016-11-02 05:37:41

解决方案4
0 已采纳 2016-11-02 09:41:30

将Angular $ http.get调用对象分配给变量

问题描述

4 个解决方案

解决方案1 0 2016-11-01 19:53:11

解决方案2 0 2016-11-02 02:47:02

解决方案3 0 2016-11-02 05:37:41

解决方案4 0 已采纳 2016-11-02 09:41:30

解决方案1
0 2016-11-01 19:53:11

解决方案2
0 2016-11-02 02:47:02

解决方案3
0 2016-11-02 05:37:41

解决方案4
0 已采纳 2016-11-02 09:41:30