Leer datos JSON de archivos externos en React

1. Leer datos JSON de archivos externos en React
2. Use la instrucción importar para leer datos JSON de archivos externos en React
3. Use la función require() para leer datos JSON de archivos externos en React

JSON es el formato más práctico para intercambiar datos en la web. Las aplicaciones web creadas en React generalmente obtienen datos externos en formato JSON.

Sin datos externos, las aplicaciones no serían muy útiles ni dinámicas. Por lo general, la fuente de datos es API, pero también puede ser un archivo externo.

Este artículo explorará cómo leer datos de archivos JSON en React.

Leer datos JSON de archivos externos en React

Es bastante fácil acceder a los datos de un archivo JSON en React. En JSX, puede usar el método .map() para revisar la matriz y mostrar información de cada objeto de la matriz.

Para eso, necesitará llaves {}, que le permitirán usar expresiones de JavaScript para producir elementos como <h1>.

Exploremos dos formas de hacerlo en React.

Use la instrucción importar para leer datos JSON de archivos externos en React

Puede usar una declaración de importación simple para hacer que los datos JSON externos estén disponibles en su componente React.

La declaración de importación crea un enlace en vivo. En otras palabras, si cambia cualquier parte de los datos del archivo original, los valores de su aplicación también se actualizarán.

Ejemplo:

import { stockData } from "./data";

export default function App() {
    return (
    <div className="App">
            {stockData.map((data, key) => {
                return <h1 key={key}>{data.company}</h1>;
            })}
        </div>
    );
}

Importamos la variable stockData del archivo data.json, que contiene un objeto en formato JSON.

Luego usamos las llaves para llamar al método .map() en la matriz stockData y mostramos los valores de cada elemento de la matriz como un elemento <h1>.

Mira esta demostración en vivo en CodeSandbox. Intente cambiar algo en los datos de origen y vea si algo cambia en su aplicación React.

Use la función require() para leer datos JSON de archivos externos en React

Hay otra forma de leer datos JSON externos en sus componentes React usando la función require().

Ejemplo:

var data = require("./moredata.json");

export default function App() {
    return (
        <div className="App">
            {stockData.map((data, key) => {
                return <h1 key={key}>{data.company}</h1>;
            })}
            <h2>The name is: {data[0].name}</h2>
        </div>
    );
}

En este caso, leemos los datos del archivo moredata.json y los almacenamos en la variable data.

Luego creamos un elemento <h2>. Entre las etiquetas de apertura y cierre, colocamos una referencia a los datos que cargamos.

Leemos la propiedad nombre del primer objeto del arreglo. Como puede ver en demostración en vivo, funciona.

Posibles errores

Las versiones recientes de Webpack admiten esta función. Si obtiene errores, considere instalar un cargador externo como json-loader.

Compruébalo en npm.