Tento článek vám ukáže, jak načíst soubor JSON do JavaScriptu jako objekt JSON – místní i vzdálené soubory.
Co je JSON?
JSON (J avaS skript O bject N otation) je formát souboru, který ukládá objekty a pole objektů jako text čitelný pro člověka. Stal se nejoblíbenější metodou ukládání a přenosu strukturovaných dat na internetu.
Tisíce rozhraní API (používaných pro mapování, komunikaci, autentizaci a mnoho dalších účelů) jej používají jako formát pro odesílání a přijímání dat. Desktopové aplikace jej také používají k ukládání uživatelských dat a databáze jej přijaly pro ukládání strukturovaných dat.
Je všude, takže se s ním docela dobře seznámíte bez ohledu na to, na čem pracujete. Takto to vypadá:
{ "pets": [ { "name": "Frank", "animal": "Dog", "colour": "Blue" }, { "name": "Jim", "animal": "Cat", "colour": "Green" }, { "name": "Pam", "animal": "Cow", "colour": "Red" } ] }
Výše je seznam mazlíčků definován v syntaxi JSON. Pokud jste pracovali s objekty JavaScriptu, uznáte, že je to velmi podobné syntaxi používané k definování objektů a polí v JavaScriptu. Více o samotné syntaxi JSON naleznete zde.
Analýza JSON v JavaScriptu
JSON je jen text – musí být interpretován a převeden na objekty, aby byl užitečný v JavaScriptu.
Všechny níže uvedené metody to udělají a vrátí použitelné objekty a pole jako objekty JavaScript.
Čtení souboru na adrese URL z prohlížeče
Pokud vytváříte web a chcete číst soubor JSON pomocí JavaScriptu spouštěného v prohlížeči, musí být načten z adresy URL – i když je uložena na stejném disku, ve stejné složce jako spouštěný soubor JavaScript.
Načtení Funkce v JavaScriptu přečte obsah souboru na dané adrese URL a má vestavěnou funkci pro analýzu JSON do použitelných objektů JavaScriptu.
var url = 'https://example.com/test.json'; fetch(url) .then(response => response.json()) .then(json => { console.log(json); // Do stuff with the contents of the JSON file here });
Výše načíst se používá k načtení souboru na dané adrese URL. První pak příkaz načte JSON analyzovanou verzi odpovědi.
Druhý pak příkaz pak obsahuje analyzovaný soubor JSON připravený k použití – v tomto případě se jednoduše zaloguje do konzole pro kontrolu.
Čtení místního souboru z prohlížeče
Program FileReader object, relativně nedávný doplněk HTML5 a JavaScriptu, vám umožňuje číst soubory uložené lokálně ve vašem počítači přímo do JavaScriptu spuštěného v prohlížeči, aniž byste jej museli nejprve nahrávat na server.
Všimněte si, že níže uvedený příklad do značné míry spoléhá na přísliby JavaScriptu – takže stojí za to se s nimi seznámit!
<script> // Function to read the JSON from a file - returns a promise containing the parsed JSON async function readJSONFile(file) { // Function will return a new Promise which will resolve or reject based on whether the JSON file is read and parsed successfully return new Promise((resolve, reject) => { // Define a FileReader Object to read the file let fileReader = new FileReader(); // Specify what the FileReader should do on the successful read of a file fileReader.onload = event => { // If successfully read, resolve the Promise with JSON parsed contents of the file resolve(JSON.parse(event.target.result)) }; // If the file is not successfully read, reject with the error fileReader.onerror = error => reject(error); // Read from the file, which will kick-off the onload or onerror events defined above based on the outcome fileReader.readAsText(file); }); } // Function to be triggered when file input changes async function fileChange(file){ // As readJSONFile is a promise, it must resolve before the contents can be read - in this case logged to the console readJSONFile(file).then(json => console.log(json)); } </script> <!-- File input. When changed, file inputs produce a FileList object (this.files) - the first item within being the first selected file. --> <input type="file" onchange="fileChange(this.files[0])" />
Čtení místního souboru z Node.js
The fs knihovna v Node.js zpracovává všechny operace čtení/zápisu místních souborů. Jakmile je použit ke čtení souboru, lze obsah jednoduše analyzovat do JSON:
const fs = require('fs'); let fileText = fs.readFileSync('data.json'); let jsonParsed = JSON.parse(fileText); console.log(jsonParsed);
Čtení vzdáleného souboru z Node.js
Načtení výše popsaná metoda je také nejlepší způsob, jak toho dosáhnout z prostředí Node.js – zkuste to!
Můžete také číst ze vzdálených zdrojů JSON z příkazového řádku systému Linux pomocí cURL.