web-dev-qa-db-ja.com

Parse.comからRest Dataを取得するangularJsコントローラーを作成する方法

以下の解決策を参照してください：

Parse.com Restバックエンドに接続し、オブジェクト値からデータを表示しようとしています。

HTML（出力を確実にキャッチするために、いくつかのangular呼び出し）を配置しました）：

<div ng-controller="MyController">
    <p>{{item}}<p>
    <p>{{items}}<p>
    <p>{{item.firstName}}<p>
    <p>{{data}}<p>

</div>

JAVASCRIPT残り：

function MyController($scope, $http) {

    $scope.items = [];
    $scope.getItems = function() {

        $http({method : 'GET',url : 'https://api.parse.com/1/classes/Professional/id', headers: { 'X-Parse-Application-Id':'XXXX', 'X-Parse-REST-API-Key':'YYYY'}})
            .success(function(data, status) {
                $scope.items = data;
            })
            .error(function(data, status) {
                alert("Error");
            });
    };
}

これは機能せず、厳密には何もせず、コンソールにメッセージが表示されることもありません。レストテスタープログラムでテストするときにオブジェクトコンテンツを返すことができるため、残りの呼び出しが正しい資格情報を取得したことを知っています。たぶんURLは絶対であってはいけませんか？どんな手がかりも大歓迎です、私はそれに何日も費やしました。

解決策：

このスレッドに回答した人々の助けのおかげで、私はこの問題の解決策を見つけることができたので、私は単に貢献したいと思いました：

Parse.comバックエンドからJsonオブジェクトデータを取得し、認証パラメーターを渡します。

function MyController($scope, $http) {

    $scope.items = [];
    $scope.getItems = function() {

        $http({method : 'GET',url : 'https://api.parse.com/1/classes/Professional', headers: { 'X-Parse-Application-Id':'XXX', 'X-Parse-REST-API-Key':'YYY'}})
            .success(function(data, status) {
                $scope.items = data;
            })
            .error(function(data, status) {
                alert("Error");
            });
    };

''に必要なarroundヘッダーキーオブジェクト値があることに注意してください。これらの ''は、メソッドおよびURLキーの周りには必要ありません。

各オブジェクトのすべての「firstName」をリストするテンプレート：

<div ng-controller="MyController" ng-init="getItems()">
     <ul>
        <li ng-repeat="item in items.results"> {{item.firstName}} </li>
    </ul>
</div>

通知：「items.resultsのアイテム」。戻り値は、オブジェクトをリストするJSON配列を持つ結果フィールドを含むJSONオブジェクトであるため、「結果」が必要です。これにより、頭痛の種を軽減できます。また、 "ng-init"にも注意してください。これを指定しない場合、またはgetItem（）を呼び出す他の形式の場合、何も起こりません。エラーは返されません。

それがAngularjsの私の最初の試みであり、私はすでに愛しています^^。

javascriptrestangularjs
16
Benj

リクエストに基づいて、コントローラは次のようになります。

[〜＃〜] html [〜＃〜]

<div ng-controller="MyController">
    <button type="button" ng-click="getItems()">Get Items</button>
    <ul>
       <li ng-repeat="item in items"> item.firstName </li>
    </ul>
</div>

[〜＃〜] js [〜＃〜]

  function MyController($scope, $http) {
        $scope.items = []

        $scope.getItems = function() {
         $http({method : 'GET',url : 'https://api.parse.com/1/classes/Users', headers: { 'X-Parse-Application-Id':'XXXXXXXXXXXXX', 'X-Parse-REST-API-Key':'YYYYYYYYYYYYY'}})
            .success(function(data, status) {
                $scope.items = data;
             })
            .error(function(data, status) {
                alert("Error");
            })
        }
    }
13
Adrian

Angular（バージョン1.5以降の.thenを使用）の新しいバージョンへのちょっとした更新：

myApp.controller('MyController', function($scope, $http) {

  $scope.items = []

  $http({
     method: 'GET',
     url: 'https://api.parse.com/1/classes/Users',
     headers: {'X-Parse-Application-Id':'XXXXXXXXXXXXX', 'X-Parse-REST-API-Key':'YYYYYYYYYYYYY'}
  })
    .then(function successCallback(response) {
        alert("Succesfully connected to the API");
        $scope.items = data;
    }, function errorCallback(response) {
        alert("Error connecting to API");
    }); 

});
1
Kefi