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

Question

See solution below:

I'm trying to connect to a Parse.com Rest backend and display data from object values.

HTML (I put several angular calls to be sure to catch output):

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

This won't work, it does strictly nothing, not even a message in the console. I know the rest call got the correct credential, as I'm able to get object content returned when I test it with a rest tester program. Maybe the URL should not be absolute ? Any clue is very welcome, i've spent DAYS on that.

SOLUTION:

Thanks to the help of people answering this thread, I was able to find the solution to this problem so I just wanted to contribute back:

Get Json object data from Parse.com backend, pass it authentification parameters:

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

Notice that ' ' necessary arround header key object values. Those ' ' are not necessary around method and url keys.

Template that list all 'firstName' of each object:

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

Notice: "item in items.results". "results" is necessary because the return value is a JSON object that contains a results field with a JSON array that lists the objects. This could save you some headache. Also notice "ng-init": if you don't put that, or any other form of call to the getItem(),then nothing will happen and you will be returned no error.

That was my first try of Angularjs, and i'm already in love ^^.

Have you tried anything? At least show us some of the code in your controller. Hint: you have to inject the "$http" service in your controller. — NicolasMoise
– NicolasMoise, Commented Nov 8, 2013 at 15:50
You should be able to use Parse Javascript SDK from your controller and update $scope.items with the data and you may want to look at this github.com/jimrhoskins/angular-parse — Prasad K - Google
– Prasad K - Google, Commented Nov 8, 2013 at 15:56
Thanks for link, but I want to avoid using any third party SDK, and directly interpret Restful data. — Benj
– Benj, Commented Nov 8, 2013 at 16:01
$http({method: 'GET', url: 'https://api.parse.com/1/classes/Professionals', headers: {X-Parse-Application-Id: 'xxx', X-Parse-REST-API-Key: 'yyy'}}) — m.e.conroy
– m.e.conroy, Commented Nov 8, 2013 at 17:05

DinoMyte · Accepted Answer · 2016-09-12 19:29:20Z

14

Based in your request the controller should be:

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

edited Sep 12, 2016 at 19:29

DinoMyte

8,8781 gold badge21 silver badges27 bronze badges

answered Nov 8, 2013 at 17:53

Adrian

4913 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Benj Over a year ago

Thanks shouldn't I name the function MyController instead of ParseCtrl ? That's the name of the controler I chose in my html.

Adrian Over a year ago

@Benj Yes, you can name the function MyController, I already did it in the answer.

Benj Over a year ago

Thanks, I edited the above message as it still won't work. Note that I had to put '' between header keys names. That is bizzare, but it would be marked as wrong code in editor I use.

Adrian Over a year ago

@Benj, What is the response from the server? Did you check it with firebug or Chrome Developer Tools?

Adrian Over a year ago

The $http request is executed when you click, not before. The response of the $http service is a promise so you can't assign it to a variable directly. For a better connection with angular and RESTful API I always use ngResource. Please could you tell how I have to modified the answer to respond to your question.

|

Kefi · Accepted Answer · 2018-10-09 06:55:45Z

1

Just a little update to the newer versions of Angular (using .then since version 1.5):

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

});

answered Oct 9, 2018 at 6:55

Kefi

1291 silver badge4 bronze badges

Comments

Sandun Susantha · Accepted Answer · 2022-07-04 09:23:48Z

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>

Collectives™ on Stack Overflow

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

3 Answers 3

9 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

9 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related