{

How to display the content of a JSON file in React with example


This tutorial shows how to display json files located in the public folder in react component example.

In my application, the employee.json file is located in a location: react/src/employee.json.

[
    {
        "id": "1",
        "title": "Developer",
        "firstName": "John",
        "lastName": "Eric",
        "salary": 5000
    },
    {
        "id": "2",
        "title": "Tester",
        "firstName": "Andrew",
        "lastName": "Johnson",
        "salary": 6000
    }
]

How to print Raw json content from a local external json file in react component.

This example prints JSON content read from json file located in React application.

In the react component, Import json file as given below

import employee from './employee.json'

JSOn content is read as a string to employee variable pass employee variable to JSON.stringify to print the json string in browser.

import React, { Component } from 'react';
import employee from './employee.json'
class LocalFileRead extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (<div >{JSON.stringify(employee)}</div>
        );
    }
}

export default LocalFileRead;

Output:

[{"id":"1","title":"Developer","firstName":"John","lastName":"Eric","salary":5000},{"id":"2","title":"Tester","firstName":"Andrew","lastName":"Johnson","salary":6000}]

How to display local external json files in react component.

We have seen how to print raw json strings read from a local file in react component.

In this example, Read the json data and print it to the table or inline elements.

In React Component,

  • Import json file with the given path and json content is stored to a variable with the name given in import
  • In render, iterate imported variable and use map to iterate data and print the data using javascript expression
  • map method iterates to iterate data elements.

Here is a react component to iterate data

import React, { Component } from 'react';
import employee from './employee.json'
class LocalFileRead extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (<div >
            <ul>
                {employee.map((record, i) => <li key={i}>{record.id} - {record.firstName} {record.firstName}</li>)}
            </ul>
        </div>
        );
    }
}

export default LocalFileRead;

How to read the external file using fetch.

This is another way of reading an external json file, It can be local or external API Url.

You can use Axios or fetch to read from local JSOn or External API calls.

In react component,

  • Create state property to hold employee json file
  • Inside componentDidMount() callback method, use fetch to access the json local file and read json content and update state property with json content.
  • Inside render, read state data, and print to the component.
import React, { Component } from 'react';
import employee from './employee.json'
class LocalFileRead extends Component {
    constructor(props) {
        super(props);
        this.state = {
            employee: []
        }
    }

    componentDidMount() {
        fetch("./employee.json").then((res) => res.json())
            .then((data) => {
                console.log(data)

                this.setState({ employee: JSON.stringify(data) }, () => {
                    alert(this.state.hugeText);
                });
            })
    }
    render() {
        const emp = this.state.employee
        return (<div >
            <ul>
                {emp.map((record, i) => <li key={i}>{record.id} - {record.firstName} {record.firstName}</li>)}
            </ul>
        </div>
        );
    }
}

export default LocalFileRead;
THE BEST NEWSLETTER ANYWHERE
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
Subscribe
You'll get a notification every time a post gets published here.





Related posts

ReactJS Append variables with strings, jsx state and prop concatenate html

Reactjs Fix Must call a super constructor in derived class before accessing this

How to change default port in React with create-react-app command?

How to create an react typescript application | Create-react-app typescript application

How to handle broken images in React | fallback for broken images

Fixing an error You are running create-react-app 4.0.3, which is behind the latest release (5.0.0) in React

How to fix Import In the body of module; reorder to top import/first? in React and javascript