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

【问题标题】：Assigning Angular $http.get call object to variable将 Angular $http.get 调用对象分配给变量
【发布时间】：2016-11-01 19:43:23
【问题描述】：

好的，首先，我是 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 变量。

【问题讨论】：

将return response.data.rows;改为return response.rows; $http then调用直接接收数据。也只是$scope.persons = response.rows; 而不是那个任务。删除$scope.persons = personSrv.getAllpersons(); 分配。
github.com/angular/angular.js/commit/…
尝试使用 $scope.persons = response.rows;但是我的调试器显示一个错误，指出响应未定义。恐怕将 response.data.rows 更改为 response.rows 也不起作用。
http://localhost:5984/quotes/_all_docs?include_docs=true 直接在浏览器中点击 url 来调试你得到的东西。响应未定义，因为存在一些问题。 '$q.reject(response.data)` 行需要修复 - 该函数的 response 参数应为 error。 function(error){ console.log(error); console.log(error.status); return $q.reject(error); }

标签： javascript jquery angularjs json

【解决方案1】：

尝试将$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>

【讨论】：

【解决方案2】：

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

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

var rowsPromise = personSrv.getAllpersons();

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

【讨论】：

【解决方案3】：

使用：

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

  $scope.persons = data;

});

【讨论】：

该方法同样有效，但我仍然无法在我的 HTML 页面上获取名称。
您的电话是否正在返回数据？您是否在浏览器中检查开发人员控制台以获取请求响应。 ?.. 或者只是在$q,resolve() 之前添加console.log(response.data.rows); 以检查.. 是否有数据。

【解决方案4】：

在进行 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);
        }
      });
    }
  };
}])

【讨论】：