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•2y ago
Message Not Public
Sign In & Join Server To View
The html file is probably a 404 which would imply that something is wrong with your path.
GitHub
GitHub - nnall/Inventory
Contribute to nnall/Inventory development by creating an account on GitHub.
the inventory.json file is in the sme src folder as the searchbar.js file/component.
SO I lead calling it with ./
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
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.
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
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')
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 .thenah
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?
};
I think so yeah, in the browser
is that he line you're getting the error on?
I get this error instead
yea
hm, well, you're still getting that first error you said you fixed though
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'
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
nothing happens, its the same
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
the fetch address path is wrong? does it need to be an absolute path or something?
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?
it is in public right now
so is this 'automatically load a url' behavior a default feature of using .fetch().. I couldn't just use .fetch() to access the .json?
Not sure what you mean. Fetch runs http requests, that's all it does
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
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
So I can't just access a local json with fetch? Or I can?
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
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
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