Что такое JSON?
JSON это лёгкий формат для обмена данными. Простой для людей, чтобы его читать и писать. Простой для машин для разбора и генерации. JSON — это текстовый формат, который полностью зависит от языка, но использует соглашения, которые знакомы программистам.JSON построен на двух структурах:
- Коллекция пар имя/значение. В различных языках это реализовано как объект, запись, структура, словарь, хэш-таблица, список ключей или ассоциативный массив.
- Упорядоченный список значений. В большинстве языков это реализовано как массив, вектор, список или последовательность.
Идея примера
В этом примере мы покажем простой способ извлечения данных из файла JSON и отображение соответствующей информации в нашем Angular-приложении, в удобном для пользователя виде. Конкретно, мы будем иметь дело с населением стран по всему миру.Файл JSON
Я уже подготовил JSON-файл со странами, в котором хранятся кодовые имена и данные о населении нескольких стран.Само приложение
Итак, какой план?- Извлекаете JSON.
- Отображаете JSON удобочитаемым способом.
Хорошо, что было проще, как насчёт одной сложности? Упоминаемое ранее «действие» на самом деле — это обращение к сервису $http, базовому сервису Angular, который облегчает общение с удалёнными HTTP-серверами через объект браузера XMLHttpRequest или через JSONP.
На практике это означает, что вам требуется развернуть приложение на веб-сервере, а не выполнить его в браузере. Для получения более подробной информации об этом факте, пожалуйста, обратитесь к этому посту.
В целом использование сервиса $http — это единственный аргумент (объект с настройками), который применяется для генерации запроса HTTP. Он возвращает обещание (promise) с двумя методами $http: success и error.
Вот как выглядит простой запрос GET:
Код:
// Пример простого запроса GET:
$http.get('/someUrl').
success(function(data, status, headers, config) {
// Этот обратный вызов будет вызываться асинхронно,
// когда получен ответ
}).
error(function(data, status, headers, config) {
// Вызывается асинхронно, если происходит ошибка
// или сервер возвращает ответ со статусом ошибки
});Кроме того, базовый сервис $http предлагает сокращённые методы, где обязательным является только URL, который должен быть обработан, в то время как данные запроса должны быть переданы для запросов POST/PUT:
Код:
$http.get('/someUrl').success(successCallback);Пример
Время для действий!Загрузка JSON в $scope
В соответствии с упомянутыми выше замечаниями мы должны загрузить наш JSON-файл в переменную $scope, скажем countries:
Код:
$http.get('countries.json').success(function(data) {
$scope.countries = data;
});
Код:
countryApp.controller('CountryCtrl', function ($scope, $http) {
$http.get('countries.json').success(function(data) {
$scope.countries = data;
});
});Отображение данных JSON в таблице
Теперь, когда мы загрузили все данные JSON в $scope.countries давайте покажем их в таблице с тремя колонками: код, название, население. Это обстоятельство переводится в два требования:- Мы должны найти способ повторно анализировать все данные из переменной $scope (поскольку мы, очевидно, не хотим, руками вводить более 70 отдельных стран).
- Мы хотим разделить данные каждой страны на её код, название и население, чтобы отображать их в соответствующей колонке таблицы.
Код:
<th>Код</th >
<th>Страна</th >
<th>Население</th >
</tr >В нашем случае, для многократного цикла по каждой стране, мы должны предположить, что каждая страна является строкой таблицы:
Код:
<tr ng-repeat="country in countries">
Код:
<tr ng-repeat="country in countries | orderBy: 'code' ">
<td>{{country.code}}</td>
<td>{{country.name}}</td>
<td>{{country.population}}</td>
</tr>
HTML:
<!DOCTYPE html>
<html ng-app="countryApp">
<head>
<meta charset="utf-8">
<title>Пример извлечения данных JSON в Angular.js</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script>
var countryApp = angular.module('countryApp', []);
countryApp.controller('CountryCtrl', function ($scope, $http){
$http.get('countries.json').success(function(data) {
$scope.countries = data;
});
});
</script>
</head>
<body ng-controller="CountryCtrl">
<h2>Пример извлечения данных JSON в Angular.js</h2>
<table class="table table-striped">
<tr>
<th>Код</th>
<th>Страна</th>
<th>Население</th>
</tr>
<tr ng-repeat="country in countries | orderBy: 'code' ">
<td>{{country.code}}</td>
<td>{{country.name}}</td>
<td>{{country.population}}</td>
</tr>
</table>
</body>
</html>Демонстрация
Давайте запустим приложение на локальном сервере.
