JSON основан на подмножестве JavaScript, а значит JSON-документ можно легко преобразовать в значение JavaScript.
Вот простой пример, как применять JavaScript для хранения JSON и вывода его на веб-странице.
Базовый пример
Это данные JSON, которые мы будем использовать в нашем примере.
{
"artists" : [
{
"artistname" : "Leonard Cohen",
"born" : "1934"
},
{
"artistname" : "Joe Satriani",
"born" : "1956"
},
{
"artistname" : "Snoop Dogg",
"born" : "1971"
}
]
}
JavaScript применяется, чтобы взять эти данные JSON, отформатировать их с помощью тегов HTML и вывести их на веб-странице.
Сам код.
<!doctype html>
<title>Пример</title>
<script>
function displayArtists() {
// Наши данные JSON
var data =
{
"artists" : [
{
"artistname" : "Leonard Cohen",
"born" : "1934"
},
{
"artistname" : "Joe Satriani",
"born" : "1956"
},
{
"artistname" : "Snoop Dogg",
"born" : "1971"
}
]
}
// Вставляем данные в переменную и форматируем их с помощью тегов HTML
var output = "<h1>Исполнители</h1>";
output += "<ul>";
// В цикле проходим по всем исполнителям
for (var i in data.artists) {
output += "<li>" + data.artists[i].artistname + " (Родился: " +
data.artists[i].born + ")</li>";
}
output += "</ul>";
// Выводим данные в элементе artistList
document.getElementById("artistList").innerHTML=output;
}
// Вызываем функцию displayArtists при загрузке окна
window.onload = displayArtists;
</script>
<!-- Показываем результаты здесь -->
<div id="artistList"></div>
В данном примере мы выводим отформатированные данные JSON с помощью innerHTML. Наш код JavaScript размещается в функции, которая вызывается после загрузки страницы (через window.onload). Вы можете также использовать другие события для вызова этой функции.
Вложения для цикла
Вот ещё один пример. На этот раз мы будем использовать большой JSON-файл с более глубоким вложением.
В этом файле содержится информация не только об исполнителе, у каждого из них есть несколько альбомов. Таким образом, в цикле нам нужно пройтись по исполнителям, а также просмотреть альбомы каждого исполнителя.
<!doctype html>
<title>Пример</title>
<script>
function displayArtists() {
// Наши данные JSON
var data =
{
"artists" : [
{
"artistname" : "Deep Purple",
"formed" : "1968",
"albums" : [
{
"albumname" : "Machine Head",
"year" : "1972",
"genre" : "Рок"
},
{
"albumname" : "Stormbringer",
"year" : "1974",
"genre" : "Рок"
}
]
},
{
"artistname" : "Joe Satriani",
"born" : "1956",
"albums" : [
{
"albumname" : "Flying in a Blue Dream",
"year" : "1989",
"genre" : "Инструментальный рок"
},
{
"albumname" : "The Extremist",
"year" : "1992",
"genre" : "Инструментальный рок"
},
{
"albumname" : "Shockwave Supernova",
"year" : "2015",
"genre" : "Инструментальный рок"
}
]
},
{
"artistname" : "Snoop Dogg",
"born" : "1971",
"albums" : [
{
"albumname" : "Tha Doggfather",
"year" : "1996",
"genre" : "Гангста-рэп"
},
{
"albumname" : "Snoopified",
"year" : "2005",
"genre" : "Гангста-рэп"
}
]
}
]
}
// Вставляем данные в переменную и форматируем их с помощью тегов HTML
var output = "<h1>Исполнители</h1>";
// В цикле проходим по всем исполнителям
for (var i in data.artists) {
output += "<h2>" + data.artists[i].artistname + "</h2>";
output += "<ul>";
// Перебор альбомов для текущего исполнителя
for (var j in data.artists[i].albums) {
output += "<li>" + data.artists[i].albums[j].albumname;
}
output += "</ul>";
}
// Выводим данные в элементе artistList
document.getElementById("artistlist").innerHTML=output;
}
// Вызываем функцию displayArtists при загрузке окна
window.onload = displayArtists;
</script>
<!-- Показываем результаты здесь -->
<div id="artistlist"></div>
Как и в первом примере, здесь применяется функция, которая вызывается при загрузке страницы. Тем не менее, функция во втором примере использует два цикла for — один вложен в другой для извлечения вложенных данных.