如何编写一个angularJs控制器来从Parse.com获取Rest数据

时间:2013-11-08 15:45:31

标签: javascript rest angularjs

请参阅以下解决方案:

我正在尝试连接到Parse.com Rest后端并显示来自对象值的数据。

HTML(我放了几个角度调用以确保捕获输出):

<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不应该是绝对的? 任何线索都非常受欢迎,我已经花了DAYS。

SOLUTION:

感谢回答这个帖子的人的帮助,我找到了解决这个问题的方法,所以我只想回馈:

从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标头键对象值。

是围绕方法和网址密钥的那些'​​'

列出每个对象的所有'firstName'的模板:

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

注意:“item.results中的项目”。 “results”是必需的,因为返回值是一个JSON对象,它包含一个带有列出对象的JSON数组的结果字段。这可以为你节省一些头痛。 另请注意“ng-init”:如果你没有把它或任何其他形式的调用放到getItem(),那么什么都不会发生,你将不会返回任何错误。

那是我第一次尝试Angularjs,我已经恋爱了^^。

2 个答案:

答案 0 :(得分:12)

根据您的要求,控制器应该是:

<强> 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");
            })
        }
    }

答案 1 :(得分:0)

对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");
    }); 

});