Design comparison
Solution retrospective
I still don't understand to add data.json to Javascript, I can add it via liveserver but not working at normal browser because of CORS. If anyone has solution about my problem, I will very appreciate it. Thanks!
Community feedback
- @dotfivesixPosted over 2 years ago
Hi Naufal.
Nice UI and styling, I honestly like your project. As far as your problem is concerned, you can use fetch like:
fetch("./data.json").then(res => res.json()).then(data => { // use data here });
Modifying data.json isn't great option because if .json data is large and complex, it wouldn't be effective and when connecting frontend with backend, you have to work using JSON so it's necessary to understand it.
Let me know if there is any issue or confusion. Happy Coding !
1@naufalf25Posted over 2 years ago@DarkDev56 Hi DarkDev56, Thanks for your feedback and thanks for your appreciation to my project.
I just try to use fetch like your code, but when its running in normal browser not in the live server. The browser show error and it's said Cross-origin request rejected. And it's the same problem for me until now when import the JSON file to JS.
The alternate for my problem is copying the data from JSON and paste it with new file JS. Any alternate for this problem ?
1@dotfivesixPosted over 2 years ago@naufalf25 As far as I know, Cross-origin error comes when requests come from a different domain (than host). Make sure the URL u put in fetch() is
"./data.json"
or"./js/data.json"
something and nothttp://localhost:3000/data.json
(don't include domain), if it's like this, code will work in live-server but not when you open file directly/host it.1@naufalf25Posted over 2 years ago@DarkDev56 Alright, thanks for your solution. Its very helpful for me :D
1
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord