logo

Cómo leer un archivo JSON local/remoto en JavaScript [Ejemplos]

Este artículo le mostrará cómo leer un archivo JSON en JavaScript como un objeto JSON, tanto archivos locales como remotos.

¿Qué es JSON?

JSON (J avaS código O objeto N otation) es un formato de archivo que almacena objetos y matrices de objetos como texto legible por humanos. Se ha convertido en el método más popular para almacenar y transmitir datos estructurados en Internet.

Miles de API (usadas para mapeo, comunicación, autenticación y muchos otros propósitos) lo usan como formato para enviar y recibir datos. Las aplicaciones de escritorio también lo utilizan para almacenar datos de usuario y las bases de datos lo han adoptado para almacenar datos estructurados.

Está en todas partes, por lo que se familiarizará con él sin importar en qué esté trabajando. Así es como se ve:

{
    "pets":   [ 
        {
            "name": "Frank",
            "animal": "Dog",
            "colour": "Blue"
        },
        {
            "name": "Jim",
            "animal": "Cat",
            "colour": "Green"
        },
        {
            "name": "Pam",
            "animal": "Cow",
            "colour": "Red"
        }
    ]
}

Arriba, se define una lista de mascotas en sintaxis JSON. Si ha estado trabajando con objetos de JavaScript, reconocerá que es muy similar a la sintaxis utilizada para definir objetos y matrices en JavaScript. Puede encontrar más información sobre la sintaxis JSON aquí.

Análisis de JSON en JavaScript

JSON es solo texto:debe interpretarse y convertirse en objetos para que sea útil en JavaScript.

Todos los métodos a continuación harán esto y devolverán matrices y objetos utilizables como objetos de JavaScript.

Lectura de un archivo en URL desde el navegador

Si está creando un sitio web y desea leer un archivo JSON utilizando JavaScript que se ejecuta en el navegador, debe puede leerse desde una URL, incluso si está almacenada en el mismo disco, en la misma carpeta, que el archivo JavaScript que se está ejecutando.

La búsqueda La función en JavaScript leerá el contenido de un archivo en una URL determinada y tiene una funcionalidad integrada para analizar el JSON en objetos JavaScript utilizables.

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

    });

Arriba, buscar se utiliza para recuperar el archivo en la URL dada. El primero luego recupera la versión JSON analizada de la respuesta.

El segundo entonces Luego, la declaración contiene el archivo JSON analizado listo para usar; en este caso, simplemente se registra en la consola para su inspección.

Lectura de un archivo local desde el navegador

El Lector de archivos object, una adición relativamente reciente a HTML5 y JavaScript, le permite leer archivos almacenados localmente en su computadora directamente en JavaScript que se ejecuta en un navegador, sin necesidad de cargarlos primero en un servidor.

Tenga en cuenta que el siguiente ejemplo se basa en gran medida en las promesas de JavaScript, ¡así que vale la pena familiarizarse con ellas!

<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])" />

Lectura de un archivo local desde Node.js

El fs biblioteca en Node.js maneja todas las operaciones de lectura/escritura de archivos locales. Una vez que se ha utilizado para leer un archivo, el contenido simplemente se puede analizar en JSON:

const fs = require('fs');

let fileText = fs.readFileSync('data.json');
let jsonParsed = JSON.parse(fileText);
console.log(jsonParsed);

Lectura de un archivo remoto desde Node.js

La búsqueda El método descrito anteriormente también es la mejor manera de lograr esto desde un entorno Node.js. ¡Pruébalo!

También puede leer recursos JSON remotos desde la línea de comandos de Linux usando cURL.


No