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

112

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

Я просто пытаюсь загрузить некоторые данные 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}];

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

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

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

tl: dr Я не могу заставить вызовы AJAX работать, чтобы загрузить внешние данные в модель Angular.

  • 3
    Можем ли мы увидеть вашу попытку использования $ Resource? Это должно работать, так что, возможно, будет проще, если мы поможем вам отладить это ...
Теги:
model

2 ответа

197
Лучший ответ

Как упоминает Крис, вы можете использовать службу $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 в ваш контроллер.

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

Поделиться
  • 0
    Огромное спасибо, я в итоге воспользовался службой $ http ... хотя и немного другим способом ... code $ http.get ('/ json'). success (function (response) {$ scope.reports = response ; getData (); code который мне интересен, это объект обещания ... Я действительно хочу узнать больше об этом. Мне нравится идея этого. Другая проблема, с которой я столкнулся, это в основном запуск цикла на ajax запрос, чтобы я мог постоянно "автоматически" обновлять страницу. Тайм-аут $ не работает для меня.
  • 1
    Я считаю, что это должно быть $ scope.todos = res; вместо res.data.
Показать ещё 4 комментария
26

Вот простой пример загрузки данных 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"
            }
        ]
    }

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

Изображение 3608

Я хочу, чтобы текст каждого элемента поступал из поля "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" будет установлена ​​в ID (поле CustomerID) этой записи клиента.

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

данные JSON с Angular

Mike

Поделиться
  • 0
    Это на самом деле работает? Ваш JSON недействителен (ключи не в кавычках). Вы не получаете ошибки?
  • 0
    Извини, ты прав. Я взял приведенный выше скриншот из Google Chrome с установленным превосходным плагином JSONView (чтобы вы могли просматривать JSON в хорошем формате). Но да, JSON из моего веб-сервиса действителен. Если вы нажмете на ссылку в моей статье, вы сможете просмотреть живую версию этого кода.
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню