fetch request to a local .json getting error SyntaxError: Unexpected token '<', "<!DOC

I'm trying to fetch a locally-housed .json file, but I continue to get a Syntax error back, telling me it found an HTML page Where is this HTML coming from? Will post GH momentarily
32 Replies
Unknown User
Unknown User2y ago
Message Not Public
Sign In & Join Server To View
Chris Bolson
Chris Bolson2y ago
The html file is probably a 404 which would imply that something is wrong with your path.
thethingisback
GitHub
GitHub - nnall/Inventory
Contribute to nnall/Inventory development by creating an account on GitHub.
thethingisback
the inventory.json file is in the sme src folder as the searchbar.js file/component. SO I lead calling it with ./
Jochem
Jochem2y ago
what do you see when you go to http://localhost:3000/inventory.js ?
Unknown User
Unknown User2y ago
Message Not Public
Sign In & Join Server To View
thethingisback
Here's a wider shot of what's going on in the searchbar component. I'm retrieving the e.target.value from an input and feeding it into a function calls a fetch on the local .json file. The catch is always tripped and the error (which I consoled) is telling me it sees an HTML document instead of json. Doing a console log of the fetch response, I see that its ok property is true, but for its url it shows a http://localhost/inventory.json address. So it's throwing a browser address in front of the file name..so I still can't access it as a .json array, and use a .filter() on it for example.
Jochem
Jochem2y ago
fetch runs in the browser and will always load across the network. Javascript running in the browser has no other way of accessing the filesystem on your server
thethingisback
Okay, so I'm able to get the file, but I'm stuck at it remaining a 'module' response object, and the fact that running res.json() on it, to convert to .json, results in error: Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'json')
Jochem
Jochem2y ago
remove the first then containing console.log you're consuming res there, and returning it as the result of console.log, which doesn't return anything. That is getting fed into the next .then
thethingisback
ah So then shouldn't this:
const fetchData = (value) => { fetch("../public/inventory.json").then((res) => console.log(res.json()));
};
result in me seeing the json array in the console?
Jochem
Jochem2y ago
I think so yeah, in the browser is that he line you're getting the error on?
thethingisback
I get this error instead
thethingisback
yea
Jochem
Jochem2y ago
hm, well, you're still getting that first error you said you fixed though
thethingisback
well if I just console the res before having ever applied .json() to it, I don't get any error, but the response is a "module", not in .json format. Here, I'm trying apply .json() to it, to see an actual json, but it causes a "Uncaught SyntaxError" saying "i<!DOCTYPE is not valid json".. so it's reading an html somehow it comes back as a 'rejected promise'
Jochem
Jochem2y ago
There's no error earlier because it's not trying to parse any json, so there's no reason to report about it being invalid json You never answered my question
thethingisback
nothing happens, its the same
Jochem
Jochem2y ago
Well that's what you need to fix Your browser is trying to load that url and apparently not finding anything It's probably getting a default error page like Chris suggested all the way at the start
thethingisback
the fetch address path is wrong? does it need to be an absolute path or something?
Jochem
Jochem2y ago
Check the network tab to see the url it's trying to fetch, then put the json file there. At a completely random guess, CRAP might not be including the json file when it's building the app? I have no experience with crap though Try putting the json file in public maybe?
thethingisback
it is in public right now
thethingisback
so is this 'automatically load a url' behavior a default feature of using .fetch().. I couldn't just use .fetch() to access the .json?
Jochem
Jochem2y ago
Not sure what you mean. Fetch runs http requests, that's all it does
thethingisback
I'm following and trying to emulate this tutorial. This guy looks to have accessed a .json online, received it as a response, and then use it with filter, as a .json
Jochem
Jochem2y ago
Relative paths in fetch fill in the url you're on, yeah. Just like image tags or script tags It's still doing the http request though
thethingisback
So I can't just access a local json with fetch? Or I can?
Jochem
Jochem2y ago
You can access a json file being served by your http server with fetch, you can't access a file the http server isn't serving with fetch
thethingisback
so I need to just use import then, since the .json isn't being hosted on a server, its jsut being locally stored on my machine
Jochem
Jochem2y ago
That would probably work as well Keep in mind that the data is still going to get sent to the user's browser Just as part of whatever script you're importing it in, not as a separate file
Want results from more Discord servers?
Add your server