Plik JSON — czym jest ten format i jak go używać?

JSON to format tekstowy służący przede wszystkim do przechowywania danych. Programiści często wykorzystują go na przykład w celu oddzielenia pewnych danych od logicznej części ich aplikacji.

Przykładowy plik JSON

Oto przykładowa składnia pliku JSON z listą uczniów i ich średnich ocen.

{
	"uczniowie": {
		"uczen": [
			{
				"_imie": "Maciek",
				"_srednia": "4.48"
			},
			{
				"_imie": "Edyta",
				"_srednia": "4.55"
			},
			{
				"_imie": "Jacek",
				"_srednia": "3.72"
			}
		]
	}
}

Poniżej ta sama lista uczniów w formacie XML:

 <uczniowie>
     <uczen imie="Maciek" srednia="4.48" />
     <uczen imie="Edyta" srednia="4.55" />
     <uczen imie="Jacek" srednia="3.72" />
 </uczniowie>

Na pierwszy rzut oka XML może wydawać się znacznie czytelniejszy, ale uwierzcie mi na słowo — z JSONem nie pracuje się źle.

Jak zapisać plik w formacie JSON?

Aby zapisać plik w formacie JSON wystarczy utworzyć nowy dokument tekstowy i zapisać go z rozszerzeniem .json.

Jeżeli chcecie utworzyć taki plik dynamicznie, w zależności od wybranego przez Was języka programowania, możecie wyszukać w internecie instrukcję pod frazą jak na przykład “[Język programowania] how to save JSON file”.

Jak otworzyć plik JSON w arkuszach kalkulacyjnych?

Być może chcielibyście otworzyć plik JSON za pomocą Microsoft Excel lub Arkuszy Google. Nie ma w tym nic dziwnego, bo zarówno pliki JSON, jak i arkusze kalkulacyjne są bardzo pomocne przy przechowywaniu różnych danych.

Choć niektóre arkusze kalkulacyjne mogą obsługiwać format JSON, najprościej będzie przekonwertować taki plik na jakiś bardziej typowy dla nich format jak chociażby xlsx lub csv.

W tym celu wyszukajcie w internecie konwerter pod frazą “JSON to [format]”. Osobiście mogę polecić na przykład ten konwerter: JSON to XLSX.

Po pobraniu gotowego pliku skonwertowanego na format typowy dla arkuszy kalkulacyjnych powinniście móc jeszcze łatwiej otworzyć go za ich pomocą.

Jak używać JSON za pomocą JavaScript?

Różne języki programowania pozwalają na odczytywanie i manipulowanie danymi JSON. W poniższym przykładzie pokażę jak w prosty sposób odczytać dane JSON za pomocą JavaScript i wyrenderować je w elemencie HTML.

Aby to zrobić należy:

1. Utworzyć kod HTML.

2. Sparsować kod JSON za pomocą JavaScript.

3. Utworzyć pętle w JavaScript, która przejdzie przez wszystkie elementy JSONa i doda interesujący nas kod HTML do wybranego elementu.

Przykładowy kod HTML i JavaScript:

<div id="lista-uczniow"></div>

<script>
    let data = JSON.parse('{"uczniowie":{"uczen":[{"_imie":"Maciek","_srednia":"4.48"},{"_imie":"Edyta","_srednia":"4.55"},{"_imie":"Jacek","_srednia":"3.72"}]}}');

    for (let i = 0; i < data['uczniowie']['uczen'].length; i++) {
        document.getElementById('lista-uczniow').innerHTML += data['uczniowie']['uczen'][i]['_imie'] + ' - ' + data['uczniowie']['uczen'][i]['_srednia'] + '<hr>';
    }
</script>

Oto efekt: