Как загрузить json в мою ng-модель angular.js?

114

У меня есть, вероятно, очень очевидный вопрос, но я нигде не мог найти ответа.

Я просто пытаюсь загрузить некоторые данные JSON со своего сервера в клиент. Прямо сейчас я использую JQuery для загрузки с помощью вызова AJAX (код ниже).

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

Он находится в html файле. Пока это работает, но проблема в том, что я хочу использовать AngularJS. Теперь, когда Angular МОЖЕТ использовать переменные, я не могу загрузить все это в переменную, поэтому я могу использовать a для каждого цикла. Похоже, это связано с «$ Scope», который обычно находится в файле .js.

Проблема в том, что я не могу загрузить код с других страниц в файл .js. Каждый пример Angular показывает только такие вещи:

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

Итак, это полезно, если Я) Хотите набрать все это вручную, И Б) Если я заранее знаю, какие у меня данные ...

Я не знаю заранее (данные динамические) и не хочу их печатать.

Итак, когда я попытался изменить вызов AJAX на Angular с помощью $ Resource, похоже, это не сработало. Возможно, я не могу понять, но это относительно простой запрос GET для данных JSON.

tl: dr Я не могу заставить работать вызовы AJAX для загрузки внешних данных в угловую модель.

MJR_III
источник
3
Можем ли мы увидеть вашу попытку использовать $ Resource? Это должно сработать, так что, возможно, будет проще, если мы поможем вам отладить это ...
Крис Дженкинс,

Ответы:

189

Как упоминает Крис, вы можете использовать $resourceсервис для взаимодействия с сервером, но у меня сложилось впечатление, что вы начинаете свой путь с Angular - я был там на прошлой неделе - поэтому я рекомендую начать экспериментировать непосредственно с $httpсервисом. В этом случае вы можете вызвать его getметод.

Если у вас есть следующий JSON

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

Вы можете загрузить это так

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

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

getМетод возвращает посыл объект , который первый аргументом является успехом обратным вызовом , а вторая ошибка обратного вызова.

Когда вы добавляете $httpв качестве параметра функции Angular, это чудо и вводит $httpресурс в ваш контроллер.

Я привел здесь несколько примеров

Хайме
источник
Большое спасибо, я все-таки использовал вместо этого службу $ http ... хотя и немного по-другому ... code$ http.get ('/ json'). success (function (response) {$ scope.reports = response; getData (); code что меня интересует, так это объект обещания ... Я действительно хочу узнать об этом больше. Мне нравится эта идея. Другая проблема, с которой я столкнулся, - это в основном выполнение цикла по запросу ajax, поэтому я могу постоянно обновлять страницу «автоматически». $ timeout у меня не работает.
MJR_III
1
Я считаю, что это должно быть $ scope.todos = res; вместо res.data.
Anoyz
Объект ответа имеет четыре свойства: config, data, headersи status. Значения в dataсвойстве соответствуют вашим требованиям.
jaime
1
стоит иметь $ scope.todos = []; перед http-запросом, чтобы у вас была по крайней мере пустая структура по умолчанию, чтобы не вызывать ошибок в вашем шаблоне.
S ..
1
re: $scope.todos = res;или $scope.todos = res.data;- разница в том, находитесь ли вы в .then(response)или в .success(result) . .successДается, в response.dataто время .thenкак дается все response.
Джесси Чизхолм
28

Вот простой пример того, как загрузить данные JSON в модель Angular.

У меня есть веб-служба JSON «GET», которая возвращает список сведений о клиенте из онлайн-копии базы данных Microsoft Northwind SQL Server .

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

Он возвращает некоторые данные JSON, которые выглядят следующим образом:

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

..и я хочу заполнить раскрывающийся список этими данными, чтобы он выглядел так ...

Угловой скриншот

Я хочу, чтобы текст каждого элемента поступал из поля «CompanyName», а идентификатор - из полей «CustomerID».

Как бы я это сделал?

Мой контроллер Angular будет выглядеть так:

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

... который заполняет переменную listOfCustomers этим набором данных JSON.

Затем на моей HTML-странице я бы использовал это:

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

И это все. Теперь мы можем увидеть список наших данных JSON на веб-странице, готовый к использованию.

Ключ к этому - в теге "ng-options":

customer.CustomerID as customer.CompanyName for customer in listOfCustomers

Странный синтаксис, чтобы понять!

Когда пользователь выбирает элемент в этом списке, в переменной «$ scope.selectedCustomer» будет установлен идентификатор (поле CustomerID) этой записи клиента.

Полный сценарий для этого примера можно найти здесь:

Данные JSON с Angular

Майк

Майк Гледхилл
источник
Это действительно работает? Ваш JSON недействителен (ключи не в кавычках). У вас нет ошибок?
CodyBugstein
Простите, вы правы. Я сделал снимок экрана выше из Google Chrome с установленным отличным надстройкой JSONView (чтобы вы могли просматривать JSON в красиво отформатированном виде). Но да, JSON из моего веб-сервиса действителен. Если вы перейдете по ссылке в моей статье, вы сможете просмотреть живую версию этого кода.
Mike Gledhill
Это работает? Я думаю, это должны быть данные. GetAllCustomersResult
ihappyk
Ой, ты абсолютно прав. Я изменил веб-службу, включив в нее упаковку результатов JSON в GetAllCustomersResult, так что да, это необходимо. Я обновил образец кода. Спасибо за предупреждение.
Майк Гледхилл
0

Я использую следующий код, найденный где-то в Интернете, но не помню источник.

    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);
перепутались вверх
источник