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

How to write an angularJs Controller to GET Rest Data from Parse.com

本文关键字：Parse com 获取 数据 REST 控制器 angularJs 何编写 一个      更新时间：2023-09-26

请参阅下面的解决方案：

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

HTML（我放了几个角度调用以确保捕获输出）：

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

JAVASCRIPT rest：

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 测试器程序测试对象内容时能够返回对象内容。也许网址不应该是绝对的？任何线索都非常受欢迎，我已经花了几天时间。

溶液：

感谢回答此线程的人的帮助，我能够找到这个问题的解决方案，所以我只想回馈：

从后端获取 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 键周围不需要这些 ' '。

列出每个对象的所有"名字"的模板：

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

注意："项目中的项目.结果"。"results"是必需的，因为返回值是一个 JSON 对象，其中包含一个结果字段和一个列出对象的 JSON 数组。这可以为您省去一些头痛。另请注意"ng-init"：如果您不将其或任何其他形式的调用放入getItem（），则不会发生任何事情，并且不会返回任何错误。

那是我第一次尝试Angularjs，我已经爱上了^^。

根据您的请求，控制器应为：

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

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


var app = angular.module("app",[]);
app.controller("postcontroller", function($scope, $http){
$scope.getAllProjects = function() {
        var url = 'https://reqres.in/api/products';
        $http.get(url).then(
            function(response) {
            $scope.projects = response.data.data;
            },
            function error(response) {
              $scope.postResultMessage = "Error with status: "
                  + response.statusText;
            });
      }
      $scope.getAllProjects(); 
 });
<div ng-app="app">
<div ng-controller="postcontroller">
<div class="panel-body">
    <div class="form-group">
      <label class="control-label col-sm-2" for="project">Project:</label>
      <div class="col-sm-5">
        <select id="projectSelector" class="form-control">
          <option id="id" ng-repeat="project in projects"
             value="{{project.id}}">{{project.name}}</option>
        </select>
      </div>
    </div>
  </div>
 </div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>

相关文章：