如何编写angularJs控制器以从www.example.com获取剩余数据Parse.com

gg0vcinb  于 2022-10-31  发布在  Angular
关注(0)|答案(3)|浏览(170)

请参阅以下解决方案:

我正在尝试连接到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");
            });
    };
}

这是行不通的,它什么也不做,甚至在控制台中没有消息。我知道rest调用得到了正确的凭证,因为我可以在用rest测试程序测试它时得到返回的对象内容。也许URL不应该是绝对的?任何线索都是非常受欢迎的,我已经花了几天的时间在这上面了。

解决方案:

感谢人们的帮助回答这个线程,我能够找到这个问题的解决方案,所以我只是想贡献回来:
从www.example.com后台获取Json对象数据Parse.com,并传递给它认证参数:

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

请注意,标头关键字对象值前后必须有''而方法和url关键字前后则不需要有''
列出每个对象的所有“firstName”的模板:

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

注意:“item in items.results”.“results”是必需的,因为返回值是一个JSON对象,其中包含一个结果字段,该字段带有一个列出对象的JSON数组。这可以让您省去一些麻烦。另外注意“ng-init”:如果您不将该函数或任何其他形式的调用置于getItem()中,则不会发生任何事情,也不会返回任何错误。
这是我第一次尝试Angularjs,我已经爱上它了。

a1o7rhls

a1o7rhls1#

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

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

clj7thdc2#

只是对较新版本的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");
    }); 

});

相关问题