web-dev-qa-db-ja.com

React jsでローカルJSONファイルを解析するにはどうすればよいですか？

JSONファイルを解析してそのデータをすべて取得し、コードで使用するにはどうすればよいですか？

ファイルをインポートして、コンソールにログを記録しようとしましたが、印刷オブジェクト{}のみです：

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

各コンポーネントの姓と名にアクセスし、それらをWebサイトに印刷できるようにしたいと思います。

javascriptjsonreactjs
18
Parkicism
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);
}

https://jsfiddle.net/c9wupvo6/

21
fuzz

また、空のオブジェクトを取得する際に問題が発生しました。上記のようにrequireを使用する場合でも。

fetchしかし、私の問題を解決しました：

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

（現在、サポートは最適ではありません： http://caniuse.com/#feat=fetch ）

5
patad

これにも問題がある人にとっては、このコードは問題を修正したようです

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();
}

}
2
Parkicism

Webpack 2.0.0+でパッケージ化されたアプリケーション（ create-react-app で作成されたアプリケーションなど）は、質問とまったく同じように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);
0
erich2k8