it-swarm.com.de

Wie lade ich json in mein anglejs ng-model?

Ich habe eine meiner Meinung nach wahrscheinlich 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>

Diese befindet sich in der HTML-Datei. Es funktioniert soweit, aber das Problem ist, dass ich AngularJS verwenden möchte. Nun, während Angular CAN die Variablen verwendet, kann ich das Ganze nicht in eine Variable laden, sodass ich eine für jede Schleife verwenden kann. Dies scheint mit dem "$ Scope" zusammenhängen, 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 ich A) möchte das alles von Hand eingeben, UND B) Wenn ich im Voraus weiß, was meine Daten sind ...

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

Wenn ich also versucht habe, den AJAX - Aufruf mit $ Resource in Angular zu ändern, scheint es 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 aufrufen, um externe Daten in ein Winkelmodell zu laden.

114
MJR_III

Wie Kris erwähnt, können Sie den $resource-Dienst 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 $http-Dienst zu experimentieren. In diesem Fall können Sie die get-Methode aufrufen.

Wenn Sie die folgende 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 get-Methode gibt ein promise - Objekt zurück, wobei das erste Argument ein success - Callback und das zweite ein error Callback ist.

Wenn Sie $http als Parameter einer Funktion hinzufügen, bewirkt Angular eine magische Und injiziert die $http-Ressource in Ihren Controller.

Ich habe hier einige Beispiele gegeben

189
jaime

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

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

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

Es gibt einige JSON-Daten zurück, 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 ...

Angular screenshot

Ich möchte, dass der Text jedes Elements aus dem Feld "CompanyName" und die ID aus den Feldern "CustomerID" 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 verwendet werden kann.

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 zu bewegen!

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

28
Mike Gledhill

Ich verwende folgenden Code, der irgendwo im Internet gefunden wurde, kann sich jedoch nicht an die Quelle erinnern.

    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