Jak załadować json do mojego modelu ng angular.js?

114

Mam chyba bardzo oczywiste pytanie, ale nigdzie nie mogłem znaleźć odpowiedzi.

Po prostu próbuję załadować dane JSON z mojego serwera do klienta. W tej chwili używam JQuery do załadowania go z wywołaniem AJAX (kod poniżej).

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

Znajduje się w pliku html. Jak dotąd działa, ale problem polega na tym, że chcę używać AngularJS. Teraz, podczas gdy Angular może używać zmiennych, nie mogę załadować całej rzeczy do zmiennej, więc mogę użyć dla każdej pętli. Wydaje się, że jest to związane z „$ Scope”, który zwykle znajduje się w pliku .js.

Problem polega na tym, że nie mogę załadować kodu z innych stron do pliku .js. Każdy przykład Angular pokazuje tylko takie rzeczy:

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

Jest to więc przydatne, jeśli IA) Chcesz wpisać to wszystko ręcznie ORAZ B) Jeśli z góry wiem, jakie są moje dane ...

Nie wiem z góry (dane są dynamiczne) i nie chcę tego wpisywać.

Tak więc, kiedy próbowałem zmienić wywołanie AJAX na Angular za pomocą $ Resource, wydaje się, że nie działa. Może nie mogę tego rozgryźć, ale jest to stosunkowo proste żądanie GET dla danych JSON.

tl: dr Nie mogę uruchomić wywołań AJAX w celu załadowania danych zewnętrznych do modelu kątowego.

MJR_III
źródło
3
Czy możemy zobaczyć twoją próbę użycia $ Resource? Powinno działać, więc być może najłatwiej będzie, jeśli pomożemy Ci to zdebugować ...
Kris Jenkins

Odpowiedzi:

189

Jak wspomina Kris, możesz wykorzystać $resourceusługę do interakcji z serwerem, ale mam wrażenie, że zaczynasz swoją przygodę z Angularem - byłem tam w zeszłym tygodniu - więc polecam zacząć bezpośrednio eksperymentować z $httpusługą. W takim przypadku możesz wywołać jego getmetodę.

Jeśli masz następujący plik JSON

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

Możesz to załadować w ten sposób

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

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

getMetoda zwraca obietnicę przedmiot, który pierwszy argument jest sukces zwrotna a druga błąd zwrotna.

Kiedy dodajesz $httpjako parametr funkcji, Angular robi to magicznie i wstrzykuje $httpzasób do twojego kontrolera.

Podałem tutaj kilka przykładów

jaime
źródło
wielkie dzięki, zamiast tego skorzystałem z usługi $ http ... chociaż trochę inaczej ... code$ http.get ('/ json'). sukces (funkcja (odpowiedź) {$ scope.reports = response; getData (); code co jest dla mnie interesujące, to obiekt obietnicy ... Naprawdę chcę dowiedzieć się więcej na ten temat. Podoba mi się ten pomysł. Innym problemem, który miałem, jest po prostu wykonywanie pętli na żądanie Ajax, więc mogę stale "automagicznie" odświeżać stronę. $ timeout nie działa dla mnie.
MJR_III
1
Uważam, że powinno to być $ scope.todos = res; zamiast res.data.
Anoyz
Przedmiotem reakcja ma cztery właściwości: config, data, headersi status. Wartości we datawłaściwości są tym, czego chcesz.
jaime
1
warto mieć $ scope.todos = []; przed żądaniem http, więc masz przynajmniej domyślną pustą strukturę, aby nie generować błędów w szablonie.
S ..
1
re: $scope.todos = res;lub $scope.todos = res.data;- różnica polega na tym, czy jesteś w a, .then(response)czy w. .success(result) The .successjest dane, response.datapodczas gdy .thenjest dane w całości response.
Jesse Chisholm
28

Oto prosty przykład ładowania danych JSON do modelu Angular.

Mam usługę sieciową JSON „GET”, która zwraca listę danych klienta z internetowej kopii bazy danych Microsoft Northwind SQL Server .

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

Zwraca niektóre dane JSON, które wyglądają następująco:

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

..i chcę wypełnić listę rozwijaną tymi danymi, aby wyglądała tak ...

Zrzut ekranu kątowego

Chcę, aby tekst każdego elementu pochodził z pola „CompanyName”, a identyfikator pochodził z pól „CustomerID”.

Jak bym to zrobił?

Mój kontroler Angular wyglądałby tak:

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

... który wypełnia zmienną „listOfCustomers” tym zestawem danych JSON.

Następnie na mojej stronie HTML użyłbym tego:

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

I to wszystko. Teraz możemy zobaczyć listę naszych danych JSON na stronie internetowej, gotową do użycia.

Klucz do tego znajduje się w tagu „ng-options”:

customer.CustomerID as customer.CompanyName for customer in listOfCustomers

To dziwna składnia, aby się poruszać!

Gdy użytkownik wybierze pozycję z tej listy, zmienna „$ scope.selectedCustomer” zostanie ustawiona na identyfikator (pole CustomerID) tego rekordu Customer.

Pełny skrypt dla tego przykładu można znaleźć tutaj:

Dane JSON z Angular

Mikrofon

Mike Gledhill
źródło
Czy to faktycznie działa? Twój kod JSON jest nieprawidłowy (klucze nie są w cudzysłowie). Czy nie otrzymujesz błędów?
CodyBugstein
Przepraszam, masz rację. Zrobiłem powyższy zrzut ekranu z Google Chrome z zainstalowanym doskonałym dodatkiem JSONView (dzięki czemu możesz przeglądać JSON w ładnie sformatowany sposób). Ale tak, kod JSON z mojej usługi internetowej jest prawidłowy. Jeśli klikniesz link w moim artykule, możesz zobaczyć wersję tego kodu na żywo.
Mike Gledhill
Czy to działa? Myślę, że powinny to być dane. GetAllCustomersResult
ihappyk
Ups, masz absolutną rację. Zmieniłem usługę sieciową, aby zawierała zawijanie wyników JSON w „GetAllCustomersResult”, więc tak, jest to potrzebne. Zaktualizowałem przykładowy kod. Dzięki za ostrzeżenie.
Mike Gledhill
0

Używam następującego kodu, znalezionego gdzieś w internecie, nie pamiętam jednak źródła.

    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);
pomieszane
źródło