3 ways to import a JSON file in React

Last updated : 2 August 2022

If you have created your React app with create-react-app, using the json-loader is the easiest way to import a JSON file in React Js.

In case you haven't, install json-loader by running npm i json-loader

Here is the JSON file that I use in this example.

{
    "name" : "LearnBestCoding",
    "website" : "www.learnbestcoding.com",
    "email" : "something@learnbestcoding.com",
    "country" :[
        {"id": "1", "name" : "USA"},
        {"id": "2", "name" : "Canada"},
        {"id": "3", "name" : "Japan"},
        {"id": "4", "name" : "Australia"}
    ]
}

1. Using json-loader to import a JSON file

Import the JSON file as import data from './data.json';

import data from './data.json';
export const UsersDetails = () =>{
return(
  <>
  <div>
    <div>Name : {data.name}</div>
    <div>Email : {data.email}</div>
    <div>Website : {data.website}</div>
    <div><label>Country :</label>
    <select>
      {data.country.map((country) => {
        return <option key={country.id} value={country.id}>{country.name}</option>
      })}
    </select>
    </div>
  </div>
  </>
)
}

2. Import JSON using Node.js built-in require() function

require() is the Node.js built-in function to load external resources.

interface Country {
  id: string
  name: string
}
export const UsersDetails = () =>{
let data = require('./data.json');
return(
  <>
  <div>
    <div>Name : {data.name}</div>
    <div>Email : {data.email}</div>
    <div>Website : {data.website}</div>
    <div><label>Country :</label>
    <select>
      {data.country.map((country: Country) => {
        return <option key={country.id} value={country.id}>{country.name}</option>
      })}
    </select>
    </div>
  </div>
  </>
)
}

Note that if you use Typescript, it will enforce type-checking on the country object.

3. Using fetch to access hosted JSON files

If your JSON file is hosted externally or located inside the public folder of the project, we can use the fetch() API to access it. This method will not work for JSON files located inside the src folder.

import { useEffect, useState } from "react";
interface Data {
  name: string
  website: string
  email: string
  country: [{
    id: string
    name: string
  }]
}
export const UsersDetails = () =>{
const [data, setData] = useState<Data>()
const fetchJson = () => {
  fetch('./data.json')
  .then(response => {
    return response.json();
  }).then(data => {
    setData(data);
  }).catch((e: Error) => {
    console.log(e.message);
  });
}
useEffect(() => {
  fetchJson()
},[])
return(
  <>
  <div>
    <div>Name : {data?.name}</div>
    <div>Email : {data?.email}</div>
    <div>Website : {data?.website}</div>
    <div><label>Country :</label>
    <select>
      {data?.country?.map((country) => {
        return <option key={country.id} value={country.id}>{country.name}</option>
      })}
    </select>
    </div>
  </div>
  </>
)
}
Lance
By: Lance
Lance is a software engineer with over 15 years of experience in full-stack software development.
Read more...

Leave a comment

No Comments