web-dev-qa-db-fra.com

Comment écrire un contrôleur angularJs pour obtenir des données de repos de Parse.com

Voir la solution ci-dessous:

J'essaie de me connecter à un backend de Parse.com et d'afficher des données à partir de valeurs d'objet.

HTML (je mets plusieurs appels angulaires pour être sûr de capturer la sortie):

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

</div>

JAVASCRIPT reste:

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

Cela ne fonctionnera pas, cela ne fera strictement rien, pas même un message dans la console ... Je sais que le reste de l'appel a reçu les informations d'identification correctes, car je peux obtenir le contenu de l'objet renvoyé lorsque je le teste avec un testeur de repos programme. Peut-être que l’URL ne devrait pas être absolue? Tout indice est le bienvenu, j’ai passé des JOURS à cela.

SOLUTION:

Grâce à l'aide de personnes ayant répondu à ce fil de discussion, j'ai pu trouver la solution à ce problème et je souhaitais simplement y contribuer:

Obtenez les données d'objet Json à partir du backend de Parse.com, transmettez-lui les paramètres d'authentification:

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

Notez que '' les valeurs nécessaires d'objet clé d'en-tête arround. Ceux-ci '' ne sont pas nécessaires pour les clés de méthode et d'URL.

Modèle qui liste tous les 'prénom' de chaque objet:

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

Remarque: "élément dans items.results". "results" est nécessaire car la valeur renvoyée est un objet JSON contenant un champ de résultats avec un tableau JSON qui répertorie les objets. Notez également "ng-init": si vous ne le mettez pas ou toute autre forme d’appel à getItem (), rien ne se passera et aucune erreur ne vous sera renvoyée.

C'était mon premier essai avec Angularjs, et je suis déjà amoureux ^^.

javascriptrestangularjs
15
Benj

Basé sur votre demande, le contrôleur devrait être:

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

Juste une petite mise à jour des dernières versions de Angular (en utilisant .then depuis la 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");
    }); 

});
0
Kefi