Comment charger json dans mon modèle angular.js ng?

114

J'ai ce que je pense être une question très évidente, mais je n'ai trouvé aucune réponse nulle part.

J'essaie juste de charger des données JSON de mon serveur dans le client. En ce moment, j'utilise JQuery pour le charger avec un appel AJAX (code ci-dessous).

<script type="text/javascript">
var global = new Array();
$.ajax({
    url: "/json",
    success: function(reports){
        global = reports;
        return global;
        }
    });
</script>

Ceci est situé dans le fichier html. Cela fonctionne jusqu'à présent, mais le problème est que je veux utiliser AngularJS. Maintenant, alors que Angular CAN utilise les variables, je ne peux pas charger le tout dans une variable afin que je puisse utiliser un pour chaque boucle. Cela semble être lié au "$ Scope", qui se trouve généralement dans le fichier .js.

Le problème est que je ne peux pas charger le code d'autres pages dans un fichier .js. Chaque exemple d'Angular ne montre que des trucs comme ceci:

function TodoCtrl($scope) {
  $scope.todos = [
    {text:'learn angular', done:true},
    {text:'build an angular app', done:false}];

Donc, c'est utile, si IA) Vous voulez taper tout cela à la main, ET B) Si je sais à l'avance quelles sont toutes mes données ...

Je ne sais pas à l'avance (les données sont dynamiques) et je ne veux pas les saisir.

Donc, quand j'ai essayé de changer l'appel AJAX en Angular en utilisant $ Resource, cela ne semble pas fonctionner. Peut-être que je ne peux pas le comprendre, mais c'est une requête GET relativement simple pour les données JSON.

tl: dr Je ne peux pas faire fonctionner les appels AJAX pour charger des données externes dans un modèle angulaire.

MJR_III
la source
3
Pouvons-nous voir votre tentative d'utiliser $ Resource? Cela devrait fonctionner, alors c'est peut-être plus simple si nous vous aidons à déboguer cela ...
Kris Jenkins

Réponses:

189

Comme Kris le mentionne, vous pouvez utiliser le $resourceservice pour interagir avec le serveur, mais j'ai l'impression que vous commencez votre voyage avec Angular - j'y étais la semaine dernière - donc je recommande de commencer à expérimenter directement avec le $httpservice. Dans ce cas, vous pouvez appeler sa getméthode.

Si vous avez le JSON suivant

[{ "text":"learn angular", "done":true },
 { "text":"build an angular app", "done":false},
 { "text":"something", "done":false },
 { "text":"another todo", "done":true }]

Vous pouvez le charger comme ça

var App = angular.module('App', []);

App.controller('TodoCtrl', function($scope, $http) {
  $http.get('todos.json')
       .then(function(res){
          $scope.todos = res.data;                
        });
});

La getméthode renvoie un objet de promesse dont le premier argument est un rappel de succès et le second un rappel d' erreur .

Lorsque vous ajoutez $httpcomme paramètre d'une fonction Angular fait de la magie et injecte la $httpressource dans votre contrôleur.

J'ai mis quelques exemples ici

jaime
la source
merci beaucoup, j'ai fini par utiliser le service $ http à la place ... mais d'une manière légèrement différente ... code$ http.get ('/ json'). success (function (response) {$ scope.reports = response; getData (); code ce qui m'intéresse, c'est l'objet de promesse ... Je veux vraiment en savoir plus à ce sujet. J'adore l'idée de celui-ci. L'autre problème que j'ai eu est essentiellement de lancer une boucle sur la requête ajax donc Je peux constamment actualiser "automatiquement" la page. $ timeout ne fonctionne pas pour moi.
MJR_III
1
Je pense que cela devrait être $ scope.todos = res; au lieu de res.data.
Anoyz
L'objet de réponse a quatre propriétés: config, data, headerset status. Les valeurs de la datapropriété correspondent à ce que vous souhaitez.
jaime
1
vaut la peine d'avoir un $ scope.todos = []; avant la requête http, vous avez donc au moins une structure vide par défaut pour ne pas générer d'erreurs dans votre modèle.
S ..
1
re: $scope.todos = res;ou $scope.todos = res.data;- la différence est de savoir si vous êtes dans un .then(response)ou dans un .success(result) Le .successest donné response.datatandis que le .thenreçoit le tout response.
Jesse Chisholm
28

Voici un exemple simple de chargement de données JSON dans un modèle angulaire.

J'ai un service Web JSON 'GET' qui renvoie une liste des détails du client, à partir d'une copie en ligne de la base de données Northwind SQL Server de Microsoft .

http://www.iNorthwind.com/Service1.svc/getAllCustomers

Il renvoie des données JSON qui ressemblent à ceci:

{ 
    "GetAllCustomersResult" : 
        [
            {
              "CompanyName": "Alfreds Futterkiste",
              "CustomerID": "ALFKI"
            },
            {
              "CompanyName": "Ana Trujillo Emparedados y helados",
              "CustomerID": "ANATR"
            },
            {
              "CompanyName": "Antonio Moreno Taquería",
              "CustomerID": "ANTON"
            }
        ]
    }

..et je veux remplir une liste déroulante avec ces données, pour ressembler à ceci ...

Capture d'écran angulaire

Je veux que le texte de chaque élément provienne du champ "CompanyName" et que l'ID provienne des champs "CustomerID".

Comment le ferais-je?

Mon contrôleur angulaire ressemblerait à ceci:

function MikesAngularController($scope, $http) {

    $scope.listOfCustomers = null;

    $http.get('http://www.iNorthwind.com/Service1.svc/getAllCustomers')
         .success(function (data) {
             $scope.listOfCustomers = data.GetAllCustomersResult;
         })
         .error(function (data, status, headers, config) {
             //  Do some error handling here
         });
}

... qui remplit une variable "listOfCustomers" avec cet ensemble de données JSON.

Ensuite, dans ma page HTML, j'utiliserais ceci:

<div ng-controller='MikesAngularController'>
    <span>Please select a customer:</span>
    <select ng-model="selectedCustomer" ng-options="customer.CustomerID as customer.CompanyName for customer in listOfCustomers" style="width:350px;"></select>
</div>

Et c'est tout. Nous pouvons maintenant voir une liste de nos données JSON sur une page Web, prête à être utilisée.

La clé pour cela se trouve dans la balise "ng-options":

customer.CustomerID as customer.CompanyName for customer in listOfCustomers

C'est une étrange syntaxe à comprendre!

Lorsque l'utilisateur sélectionne un élément dans cette liste, la variable "$ scope.selectedCustomer" sera définie sur l'ID (le champ CustomerID) de cet enregistrement client.

Le script complet de cet exemple peut être trouvé ici:

Données JSON avec Angular

Mike

Mike Gledhill
la source
Cela fonctionne-t-il réellement? Votre JSON n'est pas valide (les clés ne sont pas entre guillemets). N'avez-vous pas des erreurs?
CodyBugstein
Désolé, tu as raison. J'ai pris la capture d'écran ci-dessus de Google Chrome avec l'excellent addin JSONView installé (vous pouvez donc afficher le JSON d'une manière bien formatée). Mais oui, le JSON de mon service Web est valide. Si vous cliquez sur le lien dans mon article, vous pouvez voir une version en direct de ce code.
Mike Gledhill
Est-ce que ça marche? Je pense que cela devrait être des données.GetAllCustomersResult
ihappyk
Oups, vous avez absolument raison. J'avais changé le service Web pour inclure l'encapsulation des résultats JSON dans "GetAllCustomersResult", donc oui, c'est nécessaire. J'ai mis à jour l'exemple de code. Merci pour l'information.
Mike Gledhill
0

J'utilise le code suivant, trouvé quelque part sur Internet, je ne me souviens pas de la source.

    var allText;
    var rawFile = new XMLHttpRequest();
    rawFile.open("GET", file, false);
    rawFile.onreadystatechange = function () {
        if (rawFile.readyState === 4) {
            if (rawFile.status === 200 || rawFile.status == 0) {
                allText = rawFile.responseText;
            }
        }
    }
    rawFile.send(null);
    return JSON.parse(allText);
foiré
la source