Fetch local JSON file from public folder ReactJS
Solution 1
I think your fetch argument is wrong. It should be
fetch('data/mato.json')
Solution 2
You also need to pass in some headers
indicating the Content-Type
and Accept
as application/json
to tell your client that you are trying to access and accept some JSON resource from a server.
const getData=()=>{
fetch('data/mato.json'
,{
headers : {
'Content-Type': 'application/json',
'Accept': 'application/json'
}
}
)
.then(function(response){
console.log(response)
return response.json();
})
.then(function(myJson) {
console.log(myJson);
});
}
useEffect(()=>{
getData()
},[])
Solution 3
As long as data files are placed in public folder, it should work in Chrome also as in my project. So, fetch('data/mato.json') is enough for it.
Kevin
Updated on July 09, 2022Comments
-
Kevin almost 2 years
I have a problem since two days; I want read a local JSON from my public folder on my React application created with react-app.
This is my project structure:
public
data
- mato.json (my .JSON file)
src
components
- App.js
Why I put my file in
public
folder? If I build my project with file insrc
folder, my file will be include in the generatedmain.js
by the commandyarn build
.I want modify my json file without always rebuild my app.
So I can't use code like:
import Data from './mato.json'
…or:
export default { 'mydata' : 'content of mato.json'} import data from 'mydata';
I tried to fetch my .json file but "file scheme" isn't friend with
fetch()
& chrome..(Chrome error: “index.js:6 Fetch API cannot load file:///D:/projects/data/mato.json. URL scheme "file" is not supported.”)
This is my code for fetch:
fetch(`${process.env.PUBLIC_URL}/data/mato.json`) .then((r) => r.json()) .then((data) =>{ ReactDOM.render(<App appData={JSON.stringify(data)}/>, document.getElementById('root')); })
It's only works with Firefox. I also tried
mode: 'cors'
does not better.And of course I don't have any server — it's a local project — so if someone knows how I can read my JSON file locally I will much appreciate.
-
Imran Rafiq Rather almost 4 yearsThank You @Lex Soft. Have rated all of you.... Quentin and Kevin. information provided is helpful :)
-
Tyler2P almost 3 yearsThis answer is exactly the same as this answer. If you feel this question is a duplicate, give it a flag, don't just copy and paste the same answer all over the network.
-
Hamid Alinia almost 3 years@Tyler2P thanks, I just gave a flag. both questions has one meanings, just different keywords: stackoverflow.com/a/67848787/5008599