Jak číst místní/vzdálený soubor JSON v JavaScriptu [Příklady]

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.


No