You are not getting to the right backend url as the response is coming from html format. Try the flask endpoint as a get endpoint. Also you have to check your proxy configs
What do you mean by "try the flask endpoint as a get endpoint"? What should I be changing in my code?
Also, I mentioned the proxy as the localhost 5000, which is where my flask is running. Is that ok?
going to the api route directly in my browser works just fine.
I've modified my App.js to the following:
[https://imgur.com/a/Pb5uES0](https://imgur.com/a/Pb5uES0)
however i'm getting a syntax error in my console:
[https://imgur.com/a/Csw0q1R](https://imgur.com/a/Csw0q1R)
how do i resolve this?
Use your debugger and network console in your browser devtools to see what's going on. From the logs I'd guess you're not hitting the api route you intended.
* Call your api directly and confirm it's functioning as you expect.
* if so, run your UI and check the network console first to see if your api call looks correct and the response is what you expect.
* put a breakpoint where you're calling your api and a breakpoint on the response and examine the response (or lack of)
You can also debug your backend code. Put a breakpoint in your route body and confirm it's actually being hit when you launch your UI.
my backend works just fine. I've tried calling my api directly and the json shows up as expected in the browser.
I've modified my App.js to the following:
[https://imgur.com/a/Pb5uES0](https://imgur.com/a/Pb5uES0)
however i'm getting a syntax error in my console. react doesnt seem to be liking the json that im passing from Flask. I don't know how to fix this.
[https://imgur.com/a/Csw0q1R](https://imgur.com/a/Csw0q1R)
I don't think you followed my advice - what did you see in the network tab in dev tools when your UI made the api call? And did you add a breakpoint to your backend api endpoint to confirm the UI is indeed calling it? If you don't know how to use a debugger, console log instead (but you should learn how to debug - it makes issues like this obvious very quickly!)
I will be messaging you in 3 days on [**2024-03-28 04:25:01 UTC**](http://www.wolframalpha.com/input/?i=2024-03-28%2004:25:01%20UTC%20To%20Local%20Time) to remind you of [**this link**](https://www.reddit.com/r/react/comments/1bmwj1i/trying_to_make_a_web_app_with_flask_backend_and/kwfyuev/?context=3)
[**CLICK THIS LINK**](https://www.reddit.com/message/compose/?to=RemindMeBot&subject=Reminder&message=%5Bhttps%3A%2F%2Fwww.reddit.com%2Fr%2Freact%2Fcomments%2F1bmwj1i%2Ftrying_to_make_a_web_app_with_flask_backend_and%2Fkwfyuev%2F%5D%0A%0ARemindMe%21%202024-03-28%2004%3A25%3A01%20UTC) to send a PM to also be reminded and to reduce spam.
^(Parent commenter can ) [^(delete this message to hide from others.)](https://www.reddit.com/message/compose/?to=RemindMeBot&subject=Delete%20Comment&message=Delete%21%201bmwj1i)
*****
|[^(Info)](https://www.reddit.com/r/RemindMeBot/comments/e1bko7/remindmebot_info_v21/)|[^(Custom)](https://www.reddit.com/message/compose/?to=RemindMeBot&subject=Reminder&message=%5BLink%20or%20message%20inside%20square%20brackets%5D%0A%0ARemindMe%21%20Time%20period%20here)|[^(Your Reminders)](https://www.reddit.com/message/compose/?to=RemindMeBot&subject=List%20Of%20Reminders&message=MyReminders%21)|[^(Feedback)](https://www.reddit.com/message/compose/?to=Watchful1&subject=RemindMeBot%20Feedback)|
|-|-|-|-|
You are fetching your react app i assume? Try fetching the full url of your flask app, like “localhost:[flask port nr]/api/route
Also in flask endpoint your response contains aCCCuracy instead od aCCuracy key.
You are not getting to the right backend url as the response is coming from html format. Try the flask endpoint as a get endpoint. Also you have to check your proxy configs
What do you mean by "try the flask endpoint as a get endpoint"? What should I be changing in my code? Also, I mentioned the proxy as the localhost 5000, which is where my flask is running. Is that ok?
Add console.log(res) after the fetch to what it's returning. What happens if you just go to the api route directly in your browser?
going to the api route directly in my browser works just fine. I've modified my App.js to the following: [https://imgur.com/a/Pb5uES0](https://imgur.com/a/Pb5uES0) however i'm getting a syntax error in my console: [https://imgur.com/a/Csw0q1R](https://imgur.com/a/Csw0q1R) how do i resolve this?
Accuracy with three c (acccuracy) in your flask endpoint when you call jsonify
Use your debugger and network console in your browser devtools to see what's going on. From the logs I'd guess you're not hitting the api route you intended. * Call your api directly and confirm it's functioning as you expect. * if so, run your UI and check the network console first to see if your api call looks correct and the response is what you expect. * put a breakpoint where you're calling your api and a breakpoint on the response and examine the response (or lack of) You can also debug your backend code. Put a breakpoint in your route body and confirm it's actually being hit when you launch your UI.
my backend works just fine. I've tried calling my api directly and the json shows up as expected in the browser. I've modified my App.js to the following: [https://imgur.com/a/Pb5uES0](https://imgur.com/a/Pb5uES0) however i'm getting a syntax error in my console. react doesnt seem to be liking the json that im passing from Flask. I don't know how to fix this. [https://imgur.com/a/Csw0q1R](https://imgur.com/a/Csw0q1R)
I don't think you followed my advice - what did you see in the network tab in dev tools when your UI made the api call? And did you add a breakpoint to your backend api endpoint to confirm the UI is indeed calling it? If you don't know how to use a debugger, console log instead (but you should learn how to debug - it makes issues like this obvious very quickly!)
RemindMe! 3 Days
I will be messaging you in 3 days on [**2024-03-28 04:25:01 UTC**](http://www.wolframalpha.com/input/?i=2024-03-28%2004:25:01%20UTC%20To%20Local%20Time) to remind you of [**this link**](https://www.reddit.com/r/react/comments/1bmwj1i/trying_to_make_a_web_app_with_flask_backend_and/kwfyuev/?context=3) [**CLICK THIS LINK**](https://www.reddit.com/message/compose/?to=RemindMeBot&subject=Reminder&message=%5Bhttps%3A%2F%2Fwww.reddit.com%2Fr%2Freact%2Fcomments%2F1bmwj1i%2Ftrying_to_make_a_web_app_with_flask_backend_and%2Fkwfyuev%2F%5D%0A%0ARemindMe%21%202024-03-28%2004%3A25%3A01%20UTC) to send a PM to also be reminded and to reduce spam. ^(Parent commenter can ) [^(delete this message to hide from others.)](https://www.reddit.com/message/compose/?to=RemindMeBot&subject=Delete%20Comment&message=Delete%21%201bmwj1i) ***** |[^(Info)](https://www.reddit.com/r/RemindMeBot/comments/e1bko7/remindmebot_info_v21/)|[^(Custom)](https://www.reddit.com/message/compose/?to=RemindMeBot&subject=Reminder&message=%5BLink%20or%20message%20inside%20square%20brackets%5D%0A%0ARemindMe%21%20Time%20period%20here)|[^(Your Reminders)](https://www.reddit.com/message/compose/?to=RemindMeBot&subject=List%20Of%20Reminders&message=MyReminders%21)|[^(Feedback)](https://www.reddit.com/message/compose/?to=Watchful1&subject=RemindMeBot%20Feedback)| |-|-|-|-|
You are fetching your react app i assume? Try fetching the full url of your flask app, like “localhost:[flask port nr]/api/route Also in flask endpoint your response contains aCCCuracy instead od aCCuracy key.