JSON заснований на підмножині JavaScript, а значить JSON-документ можна легко перетворити на значення JavaScript.
Ось простий приклад, як застосовувати JavaScript для зберігання JSON та виведення його на веб-сторінці.
Базовий приклад
Це дані JSON, які ми будемо використовувати в нашому прикладі.
<code data-language="javascript">{ " ;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 один вкладений в інший для вилучення вкладених даних.