Comment charger json dans mon angular.js ng-model?

J'ai ce que je pense est probablement une question très évidente, mais je ne pouvais pas trouver une réponse, n'importe où.

Je suis juste essayer de charger des données JSON à partir de mon serveur vers le client. Maintenant, je suis à l'aide de 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 tellement bien, mais le problème est que je veux utiliser AngularJS. Maintenant, tout Angulaire POUVEZ utiliser les variables, il est impossible de charger le tout dans une variable afin que je puisse utiliser une boucle for each. Cela semble être lié à l' "$Scope", qui est généralement situé dans le .fichier js.

Le problème est que je ne peux pas charger le code à partir d'autres pages dans un .fichier js. Un exemple de chaque Angulaire ne montre que des trucs comme ça:

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

Si, c'est utile, si je
A) Envie de taper tout cela à la main, ET
B) Si je sais à l'avance ce que toutes mes données...

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

Donc, quand j'ai essayé de changer l'appel AJAX Angulaire à l'aide de $Ressource, il ne semble pas fonctionner. Peut-être que je ne peux pas la comprendre, mais il est relativement simple d'OBTENIR la demande de données JSON.

tl:dr je ne peut pas obtenir des appels AJAX au travail afin de charger des données externes dans angulaire du modèle.

  • Pouvons-nous voir votre tentative à l'aide de $Ressource? Il doit travailler, donc c'est peut-être plus facile si nous vous aider à déboguer que...
InformationsquelleAutor MJR_III | 2012-10-22
  1. 189

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

    Si vous avez le JSON

    [{ "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 ce

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

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

    La get méthode retourne un promesse objet qui
    le premier argument est un succès de rappel et la seconde d'un erreur
    de rappel.

    Lorsque vous ajoutez $http en tant que paramètre d'une fonction Angulaire est-il de la magie
    et injecte le $http de ressources dans votre contrôleur.

    J'ai mis quelques exemples ici

    • merci beaucoup, j'ai fini à l'aide de l' $service http à la place...mais d'une manière légèrement différente... code $http.get('/json').succès( function(response){ $scope.rapports = réponse; getData(); code ce qui est intéressant pour moi, c'est la promesse d'objet...j'ai vraiment envie d'en savoir plus à ce sujet. J'aime l'idée de celui-ci. L'autre problème que j'ai eu est principalement à l'exécution d'une boucle sur la requête ajax donc je peux constamment "automagiquement" actualiser la page. $timeout n'a pas été de travailler pour moi.
    • Je crois qu'il devrait être $champ d'application.todos = res; au lieu de res.les données.
    • L'objet de la réponse a quatre propriétés: config, data, headers et status. Les valeurs dans la data propriété sont ce que vous voulez.
    • la peine d'avoir un $champ d'application.todos = []; avant de la requête http, de sorte que vous au moins avoir un vide par défaut de la structure afin de ne pas générer des erreurs dans votre modèle.
    • Cet exemple fonctionne très bien sous Firefox, mais pas dans google Chrome.
    • 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) La .success est donné response.data tandis que le .then est donné à l'ensemble de la response.

    InformationsquelleAutor jaime
  2. 28

    Voici un exemple simple de comment charger des données JSON en angle modèle.

    J'ai un JSON 'GET' service web qui renvoie une liste des coordonnées du Client, à partir d'une copie en ligne de Microsoft, les Comptoirs SQL Server base de données.

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

    Il retourne des données JSON qui ressemble à 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, ressemble à...

    Comment charger json dans mon angular.js ng-model?

    Je veux que le texte de chaque article à venir de la "CompanyName" sur le terrain, et l'ID à venir de la "CustomerID" les champs.

    Comment aurais-je le faire ?

    Mon Angulaire contrôleur devrait ressembler à 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 répond à un "listOfCustomers" variable avec cet ensemble de données JSON.

    Puis, dans ma page HTML, j'utilise 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êt à être utilisé.

    La clé, c'est dans le "ng-options" tag:

    customer.CustomerID as customer.CompanyName for customer in listOfCustomers

    C'est une étrange syntaxe pour obtenir votre tête autour de !

    Lorsque l'utilisateur sélectionne un élément dans cette liste, le "$champ d'application.selectedCustomer" variable sera mis à l'ID (le champ code client) de l'enregistrement du Client.

    Le scénario complet pour cet exemple peut être trouvé ici:

    Les données JSON Angulaire

    Mike

    • N'est-ce fonctionne réellement? Votre JSON n'est pas valide (les touches ne sont pas entre guillemets). Ne vous obtenez des erreurs?
    • Désolé, vous avez raison. J'ai pris la capture d'écran ci-dessus à partir de Google Chrome avec l'excellent JSONView addin installé (vous pouvez consulter le JSON dans un bien formaté façon). Mais oui, le JSON de mon web service est valide. Si vous cliquez sur le lien dans mon article, vous pouvez afficher une version live de ce code.
    • Cela fonctionne? je pense qu'il devrait être données.GetAllCustomersResult
    • Oups, vous avez absolument raison. J'avais changé le web service d'emballage les résultats JSON dans "GetAllCustomersResult", donc oui, cela est nécessaire. J'ai mis à jour le code de l'échantillon. Merci pour le heads-up.
    InformationsquelleAutor Mike Gledhill
  3. 0

    Je utiliser le code suivant, trouvé quelque part sur internet ne me souviens pas de la source si.

        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);
    InformationsquelleAutor messed-up