Як завантажити json в мою angular.js ng-модель?


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 CAN може використовувати змінні, я не можу завантажити всю річ у змінну, тому я можу використовувати для кожного циклу. Здається, це пов'язано з "$ Scope", який зазвичай знаходиться у файлі .js.

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

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

Отже, це корисно, якщо IA) Хочете ввести все це вручну І Б) Якщо я заздалегідь знаю, що всі мої дані ...

Я не знаю заздалегідь (дані динамічні), і я не хочу їх вводити.

Отже, коли я спробував змінити виклик AJAX на Angular за допомогою $ Resource, схоже, це не працює. Можливо, я не можу цього зрозуміти, але це відносно простий GET-запит на дані JSON.

tl: dr. Я не можу змусити дзвінки AJAX працювати, щоб завантажити зовнішні дані у кутову модель.


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'). успіх (функція (відповідь) {$ range.reports = відповідь; getData (); code що мені цікаво, це об’єкт обіцянки ... Мені дуже хочеться дізнатися більше про це. Мені подобається ідея цього. Інша проблема, з якою у мене виникли, - це в основному запуск циклу на запит ajax, тому я можу постійно "автоматично" оновлювати сторінку. $ timeout не працює для мене
MJR_III,

1
Я вважаю, що це має бути $ range.todos = res; замість res.data.
Анойз

Об'єкт відповіді має чотири властивості: config, data, headersі status. Значення dataвластивості - це те, що потрібно.
Хайме

1
варто мати $ range.todos = []; перед запитом http, тож ви, принаймні, маєте порожню структуру за замовчуванням, щоб не кидати помилки у вашому шаблоні.
С ..

1
Re: $scope.todos = res;чи $scope.todos = res.data;- різниця ви в .then(response)або в дається в той час як дається цільні . .success(result).successresponse.data.thenresponse
Джессі Чизгольм

28

Ось простий приклад того, як завантажувати дані JSON в кутову модель.

У мене є веб-служба JSON 'GET', яка повертає список реквізитів Клієнта з онлайн-копії бази даних Microsoft SQL Server Northwind .

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"
            }
        ]
    }

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

Кутовий скріншот

Я хочу, щоб текст кожного елемента надходив з поля "Назва компанії", а ідентифікатор - з полів "CustomerID".

Як би я це зробив?

Мій кутовий контролер виглядатиме так:

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

Це дивний синтаксис, щоб обернути голову!

Коли користувач вибере елемент у цьому списку, змінна "$ range.selectedCustomer" буде встановлена ​​на ідентифікатор (поле CustomerID) цієї записи клієнта.

Повний сценарій для цього прикладу можна знайти тут:

Дані JSON з кутовими

Майк


Це насправді працює? Ваш JSON недійсний (ключі не в лапках). Ви не помилилися?
CodyBugstein

Вибачте, ви праві. Я зробив знімок екрана з Google Chrome із встановленим чудовим додатком JSONView (так що ви можете переглядати JSON в добре відформатованому вигляді). Але так, JSON з мого веб-сервісу дійсний. Якщо ви натиснете на посилання в моїй статті, ви можете переглянути живу версію цього коду.
Майк Гледхілл

Це працює? я думаю, що це повинні бути дані.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);
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.