web-dev-qa-db-fra.com

Comment charger JSON dans mon modèle angularjs?

J'ai ce que je pense est probablement une question très évidente, mais je n'ai pu trouver de réponse nulle part.

J'essaie simplement de charger certaines 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>

Cela se trouve 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 pour pouvoir utiliser un pour chaque boucle. Cela semble être lié à "$ 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 de Angular ne montre que des choses comme ceci:

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

Donc, cela est utile si I A) veut 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 taper. 

Ainsi, lorsque j'ai essayé de modifier l'appel AJAX en Angular à l'aide de $ 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 recevoir d'appels AJAX afin de charger des données externes dans un modèle angulaire.

javascriptajaxangularjsmodel
114
MJR_III

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

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 méthode get renvoie un objet promise dont le premier argument est un rappel success et le second un rappel error

Lorsque vous ajoutez $http en tant que paramètre d'une fonction, Angular le fait par magie .__ et injecte la ressource $http dans votre contrôleur.

J'ai mis quelques exemples ici

189
jaime

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 retourne 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 ...

Angular screenshot

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

Comment pourrais-je le faire?

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é de ceci est dans la balise "ng-options":

customer.CustomerID as customer.CompanyName for customer in listOfCustomers

C'est une étrange syntaxe pour se faire une idée!

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

Le script complet de cet exemple est disponible ici:

Données JSON avec Angular

Mike

28
Mike Gledhill

J'utilise le code suivant, trouvé quelque part sur Internet, mais 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);
0
messed-up