角度$ http.get呼び出しオブジェクトを変数に割り当てる

さて、まずはかなり新しい角度です。 $ http.getを使ってCouchDBからすべてのドキュメント（JSONオブジェクト）を取得しようとしています。

{ 
 

 
    "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によると、一人一人の名前を表示したい：JSONオブジェクトには、ID、自分の名前といくつかの引用符で、基本的に人のリストです：

<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に適切に割り当てられないと仮定しています。

出典

2016-11-01 RobVH

変更 'リターンresponse.data.rows;'リターンresponse.rows 'へ;' $のHTTP呼び出しは、直接データを受け取ります。その代入よりも '$ scope.persons = response.rows;'だけです。 '$ scope.persons = personSrv.getAllpersons（）;'を削除してください。 – bhantol

https://github.com/angular/angular.js/commit/fa6e411da26824a5bae55f37ce7dbb859653276d –

$ scope.persons = response.rowsを使用しようとしました。私のデバッガは、応答が未定義であることを示すエラーを示しました。 response.data.rowsをresponse.rowsに変更してもうまくいきませんでした。 – RobVH

者のリストを持っ$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>

出典

2016-11-02 09:41:30

用途：

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

    $scope.persons = data; 

});

出典

2016-11-01 19:53:11

このメソッドは同じように機能しますが、私はまだHTMLページに名前を取得できません。 – RobVH

あなたの呼び出しがデータを返すのですか？リクエストのレスポンスをブラウザで確認してください。？..または '$ q、resolve（）'の前に 'console.log（response.data.rows）;を追加するだけです。データが来ているかどうか。 –

はうまく動作しているようです：[http://imgur.com/a/dCOBm](http://imgur.com/a/dCOBm） – RobVH

getAllpersons機能がresponse.data.rowsで解決派生約束を返します。あなたHTTP呼び出しが約束を返すのではなく、作られた後に実行するように成功ハンドラで

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

var rowsPromise = personSrv.getAllpersons(); 

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

出典

2016-11-02 02:47:02 georgeawg

パス：データは、約束の.then方法を使用して抽出する必要があります。

.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); 
 
     } 
 
     }); 
 
    } 
 
    }; 
 
}])

出典

2016-11-02 05:37:41

角度$ http.get呼び出しオブジェクトを変数に割り当てる

答えて

関連する問題