Jak załadować json do mojego kąta.js ng-model?

Mam to, co myślę, że jest bardzo oczywiste pytanie, ale nie mogłem znaleźć odpowiedzi nigdzie.

Próbuję tylko załadować dane JSON z mojego serwera do klienta. W tej chwili używam JQuery, aby załadować go 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 na razie działa, ale problem polega na tym, że chcę użyć AngularJS. Teraz, podczas gdy Angular może używać zmiennych, nie mogę załadować całości 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 .plik js.

Problem polega na tym, że nie mogę załadować kodu z innych stron doplik 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}];

Więc jest to przydatne, jeśli A) chcesz wpisać to wszystko ręcznie i B) jeśli z góry wiem, jakie są wszystkie moje dane...

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

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

Tl: dr nie mogę uruchomić połączeń AJAX w celu załadowania danych zewnętrznych do modelu kątowego.

Author: Pavlo, 2012-10-23
Source

3 answers

Jak wspomina Kris, możesz korzystać z usługi $resource do interakcji z serwerem, ale mam wrażenie, że zaczynasz swoją podróż z Angular - byłem tam w zeszłym tygodniu - więc polecam zacząć eksperymentować bezpośrednio z usługą $http. W tym przypadku można wywołać jego metodę get.

Jeśli masz następujący JSON 

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

Możesz go załadować tak 

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

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

Metoda get zwraca obiekt promise, który pierwszy argument to sukces callback i drugi błąd / align = "left" /

Gdy dodasz $http jako parametr funkcji kątowej, to i wstrzykuje zasoby $http do kontrolera.

Umieściłem tutaj kilka przykładów

 189
Author: jaime,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-10-23 13:17:44

Oto prosty przykład, jak załadować dane JSON do modelu kątowego.

Mam usługę internetową 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 dane JSON, które wyglądają tak: 

{ 
    "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ć jak to...

Kątowy zrzut ekranu

Chcę, aby tekst każdej pozycji pochodził z pola "Nazwa firmy", A ID z pól" CustomerID".

Jak miałbym to zrobić ?

Mój Kontroler kątowy 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.

Wtedy, 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. Możemy teraz zobaczyć listę naszych danych JSON na stronie internetowej, gotowy do używany.

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

customer.CustomerID as customer.CompanyName for customer in listOfCustomers

To dziwna składnia, aby dostać się do głowy !

Gdy użytkownik wybierze element z tej listy, " $ scope.selectedCustomer " zmienna zostanie ustawiona na ID (pole CustomerID) tego rekordu klienta.

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

JSON data with Angular

Mike

 28
Author: Mike Gledhill,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-12-16 09:39:56

Używam poniższego 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);
 0
Author: messed-up,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-01-17 23:53:13