unexpected token o in json at position 1
This is a topic that many people are looking for. https://granthamandira.org/ is a channel providing useful information about learning, life, digital marketing and online courses …. it will help you have an overview and solid multi-faceted knowledge . Today, https://granthamandira.org/ would like to introduce to you How to fix Unexpected Token in JSON error. Following along are instructions in the video below:
if youre seeing this unexpected token error it means that youre trying to parse something isnt JSON as JSON and its failing in most cases its probably trying to parse HTML as JSON so lets look at what causes this error and how we can fix it right here Ive got two things running side by side theres a react app that was created with create react app and on the Left I have the Express server which is just a simple server that is supposed to be sending back some passwords so let me open up the code here and I have Express server as this index.js file and it only has one API endpoint so if you get API passwords it should send back an array of passwords and then down here is this catch-all handler which is normal for any server thats serving a react app and an API its just the pass-through so if you ask for passwords or some
sort of API thing you get this and if you ask for anything else you get the index.html of the react app and then you know your app will render and youll handle everything else client-side Ive got another video on how to set up create react app with express if you want to watch that Im not going to talk too much about that here so lets get into whats causing this error though so I have this API endpoint and then over in the react app which is under under the client directory and when the component mounts it calls get passwords and get passwords uses fetch to get those passwords and theres a typo here so I misspelled password so if I fix this and save the error is gonna go away so thats great but what was causing that in the first place so if I if I misspelled this thing or if I hit any API endpoint that doesnt
exist remember expressd has this fallback route so if it doesnt hit this it hits this one gets star returns back in HTML file so when this tries to parse that each team JSON its gonna fail we can open up the developer tools heres the error were getting here and then create react app is mirroring it here but we can go over to the network tab were gonna refresh and its going to remake that request so it loads the app and then it does its get to API slash fail right which is what were doing over here if we look to this request and we look over to the response tap you can see that its its an HTML document starts with a less-than and then some HTML stuff this is the index.html from the react app but the problem is that it starts with a lesson it doesnt start with some sort of JSON character and thats why were
getting unexpected token less than in JSON at position 0 so this first character is position 0 so in this case its an easy fix all we have to do is call the write API endpoint and then everything will work again if we hit the API passwords endpoint we can see that its actually responding with JSON and if he had preview you can see JSON are right here so another way you can figure out whats coming back is to parse the response as text instead of JSON so if we change this to text this is going to blow up because its not returning an array anymore but lets comment this line over right now and after parsing it his texts take the text and just console.log that text and here since were actually getting JSON were getting this array of passwords thats great but if we made the wrong API call youre gonna see that it prints out the HTML
back so this is a good way to debug whats going on also to go a little deeper here into what this error actually means were going to cause it a couple times ourselves in the console we can run json dot parse and we can just pass it any old string like hi and well get unexpected touken h in json because the first character is an h we can also say json dot parse something like the beginning of an HTML document and were gonna get unexpected token less than well get a similar error anytime were trying to parse something that is into valid json this string is almost valid JSON but no is not a valid keyword and we get unexpected token oh because it could have been null so it was okay with the end but then when it saw the oh it gave up so thats how to interpret the unexpected token error hopefully it helps thanks for watching
tags:
unexpected token error, javascript error, javascript debugging, react, react.js, express, express.js
Thank you for watching all the articles on the topic How to fix Unexpected Token in JSON error. All shares of https://granthamandira.org/ are very good. We hope you are satisfied with the article. For any questions, please leave a comment below. Hopefully you guys support our website even more.
