Wie lade ich json in mein angle.js ng-Modell?

Ich habe eine meiner Meinung nach sehr offensichtliche Frage, aber ich konnte nirgendwo eine Antwort finden.

Ich versuche nur, einige JSON-Daten von meinem Server in den Client zu laden. Im Moment verwende ich JQuery, um es mit einem AJAX-Aufruf zu laden (Code unten).

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

Dies befindet sich in der HTML-Datei. Es funktioniert bisher, aber das Problem ist, dass ich AngularJS verwenden möchte. Während Angular die Variablen verwenden kann, kann ich das Ganze nicht in eine Variable laden, sodass ich für jede Schleife eine verwenden kann. Dies scheint mit dem "$ Scope" zu tun zu haben, der sich normalerweise in der .js-Datei befindet.

Das Problem ist, dass ich keinen Code von anderen Seiten in eine .js-Datei laden kann. Jedes Beispiel von Angular zeigt nur solche Dinge:

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

Dies ist also nützlich, wenn IA) Sie dies alles von Hand eingeben möchten UND B) Wenn ich im Voraus weiß, was alle meine Daten sind ...

Ich weiß es nicht im Voraus (die Daten sind dynamisch) und ich möchte sie nicht eingeben.

Als ich versuchte, den AJAX-Aufruf mithilfe von $ Resource in Angular zu ändern, scheint dies nicht zu funktionieren. Vielleicht kann ich es nicht herausfinden, aber es ist eine relativ einfache GET-Anfrage für JSON-Daten.

tl: dr Ich kann AJAX-Aufrufe nicht zum Laufen bringen, um externe Daten in ein Winkelmodell zu laden.

Wie Kris erwähnt, können Sie den $resourceDienst verwenden, um mit dem Server zu interagieren, aber ich habe den Eindruck, dass Sie Ihre Reise mit Angular beginnen - ich war letzte Woche dort -, daher empfehle ich, direkt mit dem $httpDienst zu experimentieren . In diesem Fall können Sie die getMethode aufrufen .

Wenn Sie den folgenden JSON haben

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

Sie können es so laden

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

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

Die getMethode gibt ein Versprechungsobjekt zurück , dessen erstes Argument ein Erfolgsrückruf und das zweite ein Fehlerrückruf ist .

Wenn Sie $httpals Parameter einer Funktion hinzufügen, wirkt Angular magisch und injiziert die $httpRessource in Ihren Controller.

Ich habe hier einige Beispiele aufgeführt

• http://plnkr.co/edit/Wuc6M7?p=preview
• https://gist.github.com/3938567

Hier ist ein einfaches Beispiel für das Laden von JSON-Daten in ein Angular-Modell.

Ich habe einen JSON-Webdienst 'GET', der eine Liste mit Kundendaten aus einer Online-Kopie der Northwind SQL Server- Datenbank von Microsoft zurückgibt .

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

Es werden einige JSON-Daten zurückgegeben, die folgendermaßen aussehen:

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

..und ich möchte eine Dropdown-Liste mit diesen Daten füllen, um so auszusehen ...

Ich möchte, dass der Text jedes Elements aus dem Feld "Firmenname" und die ID aus den Feldern "Kunden-ID" stammt.

Wie würde ich das machen?

Mein Angular Controller würde so aussehen:

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

... die eine "listOfCustomers" -Variable mit diesem Satz von JSON-Daten füllt.

Dann würde ich auf meiner HTML-Seite Folgendes verwenden:

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

Und das ist es. Wir können jetzt eine Liste unserer JSON-Daten auf einer Webseite sehen, die zur Verwendung bereit ist.

Der Schlüssel dazu liegt im Tag "ng-options":

customer.CustomerID as customer.CompanyName for customer in listOfCustomers

Es ist eine seltsame Syntax, um den Kopf herumzukriegen!

Wenn der Benutzer ein Element in dieser Liste auswählt, wird die Variable "$ scope.selectedCustomer" auf die ID (das Feld CustomerID) dieses Kundendatensatzes gesetzt.

Das vollständige Skript für dieses Beispiel finden Sie hier:

JSON-Daten mit Angular

Mike

Ich verwende folgenden Code, der irgendwo im Internet gefunden wurde. Ich erinnere mich jedoch nicht an die Quelle.

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