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.
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 the employee variable
pass employee variable to JSON.stringify to print the json string in the 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 the 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 in Class Components
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;
How to read local json file in react functional component with fetch and useEffect
The following are steps required for the functional component employee.json is placed in public folder
- First, create a state object using the useState hook, with the initial value as empty array employees, setEmployee method added to change state
- useEffect is added with functional expression and empty array parameters.
- In functional expression, get data using fetch from the local json file located in the public folder.
- Display the data in return expression
Here is a code
import React, { useEffect, useState } from 'react';
function ReadFile() {
const [employees, setEmployee] = useState([]);
useEffect(() => {
getAPI("./employee.json")
}, []);
const getAPI = (data) => {
console.log(data)
fetch(data, {
headers:
{
'Content-Type': 'application/json',
'Accept': 'application/json'
}
})
.then(res => res.json())
.then(data => {
console.log(data)
setEmployee(data);
})
}
return (<div >
<ul>
{employees.map((record, i) => <li key={i}>{record.id} - {record.firstName} {record.firstName}</li>)}
</ul>
</div>
);
}
export default ReadFile;
