How to Import JSON File in React
We will introduce how to import and decode JSON files in a React application.
Import JSON File in React
While working on React applications, we may often need to work with JSON data. This data could be from third-party APIs, external files, or maybe internal files sometimes.
This tutorial will explain how we can import JSON files in our React application and decode them to display data in tables or any form we want.
There are 2 ways to import JSON files and decode them. One is by using the json-loader module and adding it to the webpack.config, and the other is by directly importing using json-loader.
We will go through both options and understand how we can easily import JSON files and decode them using both options.
Let’s create a new application by using the following command.
# react
npx create-react-app my-app
After creating our new application in React, we will go to our application directory using this command.
# react
cd my-app
Let’s run our app to check if all dependencies are installed correctly.
# react
npm start
We will create a new JSON file in the src folder and add sample JSON data. So, the new.json will look like below.
[
{
"_id": "61fb989256f61bab608dc4d2",
"index": 0,
"guid": "d3b6f613-08d9-4adb-98db-3f41b9cd99a1",
"isActive": true,
"balance": "$2,909.62",
"age": 27,
"name": "Shields Cummings",
"gender": "male",
"company": "STRALUM",
"email": "shieldscummings@stralum.com",
"phone": "+1 (995) 477-2970",
"address": "434 Lamont Court, Marne, Guam, 4195"
},
{
"_id": "61fb98922547ddb0d59c98ba",
"index": 1,
"guid": "296d2400-c3d8-44fb-aaa5-f117b11952bf",
"isActive": true,
"balance": "$1,184.19",
"age": 33,
"name": "Mildred Burns",
"gender": "female",
"company": "TERRAGEN",
"email": "mildredburns@terragen.com",
"phone": "+1 (839) 497-3120",
"address": "746 Clay Street, Delco, Hawaii, 3210"
},
{
"_id": "61fb98921eacae6e7fe57679",
"index": 2,
"guid": "bd6e11a1-27ef-44be-8f8c-8855814efd0f",
"isActive": false,
"balance": "$1,485.42",
"age": 24,
"name": "Blanca Gilbert",
"gender": "female",
"company": "FLEETMIX",
"email": "blancagilbert@fleetmix.com",
"phone": "+1 (996) 472-2126",
"address": "783 Tudor Terrace, Rivera, Nebraska, 6089"
},
{
"_id": "61fb9892c2a1fb24a0d20157",
"index": 3,
"guid": "5f29ae59-93cb-4809-93c0-88e74ab5d3e0",
"isActive": true,
"balance": "$1,581.33",
"age": 25,
"name": "Avery Knox",
"gender": "male",
"company": "CRUSTATIA",
"email": "averyknox@crustatia.com",
"phone": "+1 (805) 440-2822",
"address": "184 Harbor Court, Alden, Delaware, 5527"
},
{
"_id": "61fb9892884ed91223aa4bb1",
"index": 4,
"guid": "c92d9bd4-d1dc-4311-a2d0-bd3278df2ba3",
"isActive": false,
"balance": "$1,098.88",
"age": 28,
"name": "Haley Mclaughlin",
"gender": "male",
"company": "GEEKFARM",
"email": "haleymclaughlin@geekfarm.com",
"phone": "+1 (824) 539-2915",
"address": "428 Douglass Street, Deseret, Colorado, 7275"
}
]
This fake or temporary JSON data can be created using an online service known as json-generator. We will install json-loader using npm and decode it.
# react
npm i json-loader --save-dev
Use the json-loader to Import JSON File in React
Once we have installed the json-loader library, we need to add a loader in the webpack.config.
# react
loaders: [
{ json: /\.json$/, loader: 'json-loader' },
]
By adding json-loader in webpack.config helps us to avoid adding a json-loader in each file.
Once we have added JSON loader in loaders, we can import it.
# react
import new from "./new.json";
When working with json-loader, we need to make sure that we are using the webpack of v2 because it doesn’t work in v1.
We can easily decode the JSON file and display data in the table. First, we will import the person from the JSON file in App.js.
Once we have imported, we can use the person as an array to get the data from the JSON. So we will create a table that will display id, Name, Age, Company, and Balance.
Our code in App.js will look like below.
# react
import "./styles.css";
import person from "./new.json";
export default function App() {
return (
<div className="App">
<h1>Decoding JSON File</h1>
<table>
<tr>
<th>Id</th>
<th>Name</th>
<th>Age</th>
<th>Company</th>
<th>Balance</th>
</tr>
<tr>
<td>{person[0]._id}</td>
<td>{person[0].name}</td>
<td>{person[0].age}</td>
<td>{person[0].company}</td>
<td>{person[0].balance}</td>
</tr>
<tr>
<td>{person[1]._id}</td>
<td>{person[1].name}</td>
<td>{person[1].age}</td>
<td>{person[1].company}</td>
<td>{person[1].balance}</td>
</tr>
<tr>
<td>{person[2]._id}</td>
<td>{person[2].name}</td>
<td>{person[2].age}</td>
<td>{person[2].company}</td>
<td>{person[2].balance}</td>
</tr>
<tr>
<td>{person[3]._id}</td>
<td>{person[3].name}</td>
<td>{person[3].age}</td>
<td>{person[3].company}</td>
<td>{person[3].balance}</td>
</tr>
</table>
</div>
);
}
As you can see, we easily get the value by using the index and key to get the specific value from the JSON file.
Output:
Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.
LinkedIn