Come scrivere un angularJs Controller per OTTENERE il Resto dei Dati da Parse.com

Vedere la soluzione di seguito:

Sto tentando di connettersi a un Parse.com Resto backend e visualizzare i dati oggetto di valori.

HTML (ho messo diversi angolare chiamate per essere sicuri di catturare l’output):

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

</div>

JAVASCRIPT resto:

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

Questo non funziona, si fa rigorosamente nulla, nemmeno un messaggio nella console.
So che il resto chiamata ottenuto le credenziali corrette, come io sono in grado di ottenere l’oggetto contenuto restituito quando faccio la prova con il tester di programma. Forse l’URL non dovrebbe essere assoluta ?
Ogni indizio è il benvenuto, ho passato giorni e GIORNI che.

SOLUZIONE:

Grazie all’aiuto di persone di rispondere a questo thread, sono stato in grado di trovare la soluzione a questo problema, così ho voluto solo contribuire:

Ottenere un oggetto Json dati Parse.com backend, passare autenticazione parametri:

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

Si noti che ‘ e ‘ necessario intorno intestazione chiave oggetto di valori. Chi e ” non sono necessarie circa il metodo e l’url chiavi.

Modello di elenco di tutti ‘firstName’ di ogni oggetto:

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

Avviso: “voce di voci.risultati”. “risultati” è necessario perché il valore di ritorno è un oggetto JSON che contiene i risultati campo con un array JSON che elenca gli oggetti. Questo potrebbe risparmiare un po ‘ di mal di testa.
Notare anche “ng-init”: se non metterlo, o qualsiasi altra forma di convocazione della getItem(),quindi non accadrà nulla e ti verrà restituito alcun errore.

Che è stato il mio primo tentativo di Angularjs, e io sono già in amore ^^.

  • Hai provato qualcosa? Almeno ci mostrano la parte del codice nel vostro controller. Suggerimento: è necessario inserire il “$” http servizio nel controllore.
  • Si dovrebbe essere in grado di utilizzare Analizzare Javascript SDK dal controller e aggiornamento $scope.articoli con i dati, quindi si consiglia di guardare a questo github.com/jimrhoskins/angular-parse
  • Grazie per il link, ma vorrei evitare l’uso di terzi SDK, e di interpretare direttamente Riposante dati.
  • Quindi è possibile utilizzare angularjs $http e re-inventare la ruota 🙂
  • Sicuramente leggere circa $http come @NicolasMoise detto. Si può fare una richiesta GET con un callback per impostare il vostro $scope.oggetto.
  • Angolare-analizzare è scritto nel caffè script, e la conversione di JS gots terribilmente complicato codice, mi dispiace io non sono un esperto. Ho letto il $https doc angolare, quello che non capisco, è come passare ad esempio parametri aggiuntivi, come ad esempio la app id e la chiave api, o qualsiasi altro parametro.
  • Di nuovo, è difficile aiutarti se non ci mostrano quello che hai tentato, anche se non funziona. Inoltre, chi lo sa? cercando in realtà si potrebbe risolvere il problema da soli 🙂
  • Ok, ho aggiornato il post di quello che sto cercando. Penso che cominciano ad andare male, all’indirizzo di I punto…. dovrebbe essere parente o un url completo, inoltre, di come integrare l’app personalizzata id e la chiave nel codice ?
  • $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.coroy, grazie, io ho intenzione di provare questo. Devo mettere la vostra linea all’interno di un MyController funzione ?
  • Potrebbe essere che non funziona perché I test sul PC locale ?

InformationsquelleAutor Benj | 2013-11-08

 

2 Replies
  1. 13

    In base alla vostra richiesta, il controllore deve essere:

    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");
                })
            }
        }
    • Grazie non ho un nome per la funzione MyController invece di ParseCtrl ? Questo è il nome del controller ho scelto nel mio html.
    • Sì, è possibile assegnare un nome alla funzione MyController, ho già fatto nella risposta.
    • Grazie, ho modificato il messaggio sopra come ancora non funziona. Nota che ho dovuto mettere ” tra intestazione chiavi di nomi. Che è bizzarro, ma sarebbe contrassegnato come sbagliato il codice nell’editor che uso io.
    • Qual è la risposta dal server? Hai fatto un controllo con firebug o Chrome Developer Tools?
    • Adrian, non ci è rigorosamente nulla nella console o nel monitoraggio della rete… sono perplesso
    • Hai controllato con la cura di risposta?
    • Ciao, questo fa un sacco di differenza. Io non riesco a vedere esattamente quello che voglio, ma quando ho messo il log della console, posso correttamente registrare prima il nome di quell’oggetto !!! Penso di poter tweak che per ottenere ciò che voglio. Si prega di spiegare perché il clic del grilletto fa una tale differenza ?
    • Il $richiesta http viene eseguito quando si fa clic su, non prima. La risposta di dollari, il servizio http è una promessa così non è possibile assegnare a una variabile direttamente. Per una migliore connessione con angolare e API RESTful io uso sempre ngResource. Per favore potreste dire come ho modificato la risposta per rispondere alla tua domanda.
    • Grazie per il vostro aiuto. Il valore di ritorno è un oggetto JSON che contiene i risultati campo con un array JSON che elenca gli oggetti come si può vedere qui: parse.com/docs/rest#queries il risultato che contiene 2 oggetti. Il problema è che il ng-repeat iterazione non funziona in questo caso, per esempio, se provo a ripetere e visualizzare tutti i ‘playerName’.
    • Ok sono riuscito ad ottenere esattamente quello che volevo. Unica cosa a cambiare è stato oggetto, negli elementi.risultati”. La mia ultima domanda è, come posso modificare questo per averlo caricato senza un clic ? Devo usare ngResource ? Come ?

  2. 1

    Solo un piccolo aggiornamento per le versioni più recenti di Angolare (utilizzando .then a partire dalla versione 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");
        }); 
    
    });

Lascia un commento