Как я могу разобрать локальный файл JSON в React js?

Как я могу проанализировать файл JSON, извлекая все его данные и используя его в моем коде?

Я попытался импортировать файл и попробовал консоль регистрировать его, но все, что он делает, это print Object {}:

import jsonData from "./file.json";
console.log(jsonData);

Вот что выглядит файл file.json:

[
    {
      "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"
    }
]

Я хочу иметь доступ к первому и фамильному имени каждого компонента и распечатать его на веб-сайте.

Ответ 1

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.first_name + ", " + obj.last_name);
}

Ответ 2

У меня также были проблемы с возвращением пустого Объекта. Даже при использовании require, как указано выше.

fetch однако решил мою проблему:

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

(На сегодняшний день поддержка не является оптимальной: http://caniuse.com/#feat=fetch)

Ответ 3

Для тех из вас, у кого также есть проблемы с этим, этот код, похоже, устранил проблему

var jsonData = require('../../file.json');

class blah extends React.Component {

render(){
    var data; 

    function loadJSON(jsonfile, callback) {   

        var jsonObj = new XMLHttpRequest();
        jsonObj.overrideMimeType("application/json");
        jsonObj.open('GET', "../../file.json", true);
        jsonObj.onreadystatechange = function () {
              if (jsonObj.readyState == 4 && jsonObj.status == "200") {
                callback(jsonObj.responseText);
              }
        };
        jsonObj.send(null);  
     }

    function load() {

        loadJSON(jsonData, function(response) {
            data = JSON.parse(response);
            console.log(data);
        });
    }

    load();
}

}

Ответ 4

Приложения, упакованные с помощью веб-пакета 2.0. 0+ (например, созданные с помощью create-реакции-приложения), поддерживают импорт из json точно так же, как в вопросе (см. этот ответ.

Помните, что import кэширует результат, даже если этот результат анализируется json, поэтому, если вы модифицируете этот объект, другие модули, которые также его импортируют, имеют ссылки на тот же объект, а не на вновь проанализированную копию.

Чтобы получить "чистую" копию, вы можете создать функцию, которая ее клонирует, например:

import jsonData from './file.json';

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

Или если вы используете lodash:

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

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