¿Cómo puedo analizar el archivo JSON local en React js?

Te sugerimos que pruebes esta solución en un ambiente controlado antes de pasarlo a producción, un saludo.

Solución:

var data = require('../../file.json'); // forward slashes will depend on the file location

var data = [
    
      "id": 1,
      "gender": "Female",
      "first_name": "Helen",
      "last_name": "Nguyen",
      "email": "[email protected]",
      "ip_address": "227.211.25.18"
    , 
      "id": 2,
      "gender": "Male",
      "first_name": "Carlos",
      "last_name": "Fowler",
      "email": "[email protected]",
      "ip_address": "214.248.201.11"
    
];

for (var i = 0; i < data.length; i++)

    var obj = data[i];
    console.log(`Name: $obj.last_name, $obj.first_name`);

https://jsfiddle.net/c9wupvo6/

También tuve problemas para recuperar un Objeto vacío. Incluso cuando se usa require como se sugirió anteriormente.

fetch sin embargo resuelto mi problema:

fetch('./data/fakeData.json')
  .then((res) => res.json())
  .then((data) => 
    console.log('data:', data);
  )

(Sin embargo, a día de hoy, el soporte no es óptimo: http://caniuse.com/#feat=fetch)

Las aplicaciones empaquetadas con webpack 2.0.0+ (como las creadas con create-react-app) admiten importaciones desde json exactamente como en la pregunta (consulte esta respuesta.

Sé consciente de import almacena en caché el resultado, incluso si ese resultado se analiza json, por lo que si modifica ese objeto, otros módulos que también lo importan tienen referencias al mismo objetono una copia recién analizada.

Para obtener una copia "limpia", puede crear una función que la clone, como:

import jsonData from './file.json';

const loadData = () => JSON.parse(JSON.stringify(jsonData));

O si estás usando lodash:

import jsonData from './file.json';
import  cloneDeep  from 'lodash';

const loadData = () => cloneDeep(jsonData);

Tienes la posibilidad comunicar este tutorial si te valió la pena.

---

---

Utiliza Nuestro Buscador