Извличане на JSON данни в AngularJS, WebReference
Какво е JSON?
JSON е изграден върху две структури:
- Колекция от двойки име/стойност. В различни езици това се реализира като обект, запис, структура, речник, хеш таблица, списък с ключове или асоциативен масив.
- Подреден списък от стойности. В повечето езици това се реализира като масив, вектор, списък или последователност.
Примерна идея
В този пример ще покажем лесен начин за извличане на данни от JSON файл и показване на съответната информация в нашето приложение Angular по удобен за потребителя начин. По-конкретно, ние ще се занимаваме с населението на страните по света.
Вече съм подготвил JSON файл с държави, който съхранява кодови имена и данни за населението за няколко държави.
Самото приложение
И така, какъв е планът?
- Извлечете JSON.
- Показвайте JSON по разбираем за човека начин.
Извличането на JSON означава, че трябва да се прави всеки път, когато приложението се зарежда в браузъра. А именно, съответното действие се случва в скрипта вътре в .
Добре, това беше по-лесно, какво ще кажете за една трудност? „Действието“, споменато по-рано, всъщност е извикване на услугата $http, основна услуга на Angular, която улеснява комуникацията с отдалечени HTTP сървъри чрез XMLHttpRequest обекта на браузъра или чрез JSONP.
На практика това означава, че трябва да разположите приложението на уеб сървър, вместо да го стартирате в браузър. За повече подробности относно този факт, моля, вижте тази публикация.
По принцип използването на услугата $http е единственият аргумент (обект с настройки), който се използва за генериране на HTTP заявка. Връща обещание с две$http : методи за успех и грешка.
Ето как изглежда една проста GET заявка:
Използваме само успеха и познайте какво?! След успешно извикване/изпълнение на услугата, искаме да заредим нашия JSON файл в глобална променлива, достъпна за всички приложения, и да, предположението ви беше правилно, $scope е глобалната променлива, която търсим!
Освен това базовата услуга $http предлага съкратени методи, при които се изисква само URL адресът, който трябва да бъде обработен, докато данните за заявката трябва да бъдат предадени за POST/PUT заявки:
Време е за действие!
Зареждане на JSON в $scope
Според забележките, споменати по-горе, трябва да заредим нашия JSON файл в променлива $scope, да кажем държави:
Очевидно това извикване на услугата трябва да бъде част от дефиницията на контролера на приложението Angular, така че ако приемем, че сме нарекли нашето приложение countryApp, ето актуализирания формат на повикване на услугата:
Ако имате нужда от повече помощ с контролера, моля, погледнете този раздел.
Показване на JSON данни в таблица
След като заредихме всички JSON данни в $scope.countries, нека ги покажем в таблица с три колони: код, име, население. Това обстоятелство се изразява в две изисквания:
- Трябва да намерим начин да анализираме повторно всички данни в променливата $scope (защото очевидно не искаме да въвеждаме ръчно повече от 70 отделни държави).
- Искаме да разделим данните за всяка държава на нейния код, име и население, за да ги покажем в съответната колона на таблицата.
Дефинирането на заглавка на таблица е много просто:
Сега, за да изпълним напълно първото изискване, ще използваме директивата ngRepeat, която инстанцирамодел наведнъж от колекцията. Всеки екземпляр на шаблона получава свой собствен обхват, където променливата на цикъла е зададена на текущата позиция на елемента, а $index е зададена на индекса или ключа на елемента.
В нашия случай, за да преминем през всяка страна много пъти, трябва да приемем, че всяка държава е ред от таблица:
Пълното изпълнение на второто изискване вече е по-лесно, тъй като държавата се обработва всеки път, когато променливата на страната може да бъде извлечена:
Ето окончателната структура на нашето приложение:
Демонстрация
Нека стартираме приложението на локален сървър.