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

114

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.

MJR_III
quelle
3
Können wir Ihren Versuch sehen, $ Resource zu verwenden? Es sollte funktionieren, also ist es vielleicht am einfachsten, wenn wir Ihnen beim Debuggen helfen ...
Kris Jenkins

Antworten:

189

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

jaime
quelle
codeVielen Dank, ich habe stattdessen den $ http-Dienst verwendet ... wenn auch etwas anders ... $ http.get ('/ json'). success (Funktion (Antwort) {$ scope.reports = Antwort; getData (); code was mich interessiert, ist das Versprechen Objekt ... Ich möchte wirklich mehr darüber erfahren. Ich liebe die Idee davon. Das andere Problem, das ich hatte, ist im Grunde eine Schleife auf der Ajax-Anfrage so zu führen Ich kann die Seite ständig "automatisch" aktualisieren. $ timeout hat bei mir nicht funktioniert.
MJR_III
1
Ich glaube, es sollte $ scope.todos = res sein; anstelle von res.data.
Anoyz
Das Response - Objekt hat vier Eigenschaften: config, data, headersund status. Die Werte in der dataEigenschaft sind genau das, was Sie wollen.
Jaime
1
es lohnt sich, ein $ scope.todos = [] zu haben; vor der http-Anfrage haben Sie also zumindest eine leere Standardstruktur, um keine Fehler in Ihre Vorlage zu werfen.
S ..
1
re: $scope.todos = res;oder $scope.todos = res.data;- der Unterschied ist, ob Sie in einem .then(response)oder in einem .success(result) Das .successist gegeben, response.datawährend das .thendas Ganze gegeben ist response.
Jesse Chisholm
28

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

Winkel-Screenshot

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

Mike Gledhill
quelle
Funktioniert das tatsächlich? Ihr JSON ist ungültig (die Schlüssel stehen nicht in Anführungszeichen). Bekommst du keine Fehler?
CodyBugstein
Entschuldigung, du hast recht. Ich habe den obigen Screenshot von Google Chrome mit dem ausgezeichneten JSONView-Add-In aufgenommen (damit Sie den JSON auf eine gut formatierte Weise anzeigen können). Aber ja, der JSON von meinem Webdienst ist gültig. Wenn Sie auf den Link in meinem Artikel klicken, können Sie eine Live-Version dieses Codes anzeigen.
Mike Gledhill
Funktioniert es? Ich denke, es sollte Daten sein. GetAllCustomersResult
ihappyk
Ups, du hast absolut recht. Ich hatte den Webdienst so geändert, dass die JSON-Ergebnisse in "GetAllCustomersResult" eingeschlossen werden. Ja, dies ist erforderlich. Ich habe das Codebeispiel aktualisiert. Danke für die Warnung.
Mike Gledhill
0

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