Load a JSON File with ES6 Modules Implementation

Loading a JSON file refers to the process of reading and parsing the data contained within a JSON file into a usable format for your application. JSON (JavaScript Object Notation) is a popular data format that stores data in a human-readable format, making it easy to exchange and work with.

In this tutorial ,  will learn how to access or consume any JSON file by implementing the ES6 standard.

Import JSON File Using NPM Package

JSON files contain a key-value pair, and there is a parent key that represents the parent node of the JSON file.

In React, if you want to load the JSON file without using the existing webpack settings, can make use of a third-party NPM package. One popular package is json-loader.

npm install json-loader

In this guide, we will be using sample JSON data stored in the Data.json file.

{
  "data": {
    "category1": {
      "name": "test123",
      "title": "this is category 123"
    },
    "category2": {
      "name": "test456",
      "title": "this is category 456"
    },
    "category3": {
      "name": "test789",
      "title": "this is category 789"
    }
  }
}

After the above JSON file is created, it will be available to import and use into existing React components.

import React, { Component } from "react";
// Custom JSON file
import Data from "./data";

export class ImportJsonFile extends Component {
    render() {
        console.log(Data) // will print the JSON file content
        return (
            <>
                <div>
                    // Use JSON data here
                </div>
            </>
        );
    }
}

export default ImportJsonFile;

Notice the ES6 import statement that imports the local JSON file, which you created previously. Using the ES6 import statement along with the json-loader, any JSON file can be consumed into the React app.

Import JSON File Using Webpack Config

The basic webpack config rule with the json5-loader is configured as defined below.

If your React app uses a webpack config version > 2.0.0, then there is no need to install json-loader because webpack uses json5-loader by default when its configured with the React app.

Note: webpack.config.js is sourced from here .

module.exports = {
  module: {
    rules: [
      {
        test: /\.json5$/i,
        loader: 'json5-loader',
        type: 'javascript/auto',
      },
    ],
  },
};

In the webpack config file, the loader rule accepts the NPM package to load any of the JSON files in your app. One package used is called json5-loader.

Along with the loader rule, there are two other rules, one of which is test.

test: /\.json5$/i,

That identifies the file format of the JSON or gives a warning at the time of compilation.

There is an additional Boolean option available called esModule, which is used to define whether the module should be ECMAScript-supported or not.

The basic setting for esModule is shown below.

module.exports = {
  module: {
    rules: [
      {
        test: /\.json5$/i,
        loader: 'json5-loader',
        options: {
          esModule: true,
        },
        type: 'javascript/auto',
      },
    ],
  },
}

By maintaining the rules with a webpack, the React app is configured to access the JSON file from the physical app location by verifying its file extension and the default JSON loading library.
 

React app uses various ES6 features, such as let, const, spread operator, arrow function, class, and literals, so your app should be well configured to support the JSON file format.
 

#json #es6 #javascript