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 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;
