Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Expenses Chart

@naufalf25

Desktop design screenshot for the Expenses chart component coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

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

DarkDev56 330

@dotfivesix

Posted

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

@naufalf25

Posted

@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
DarkDev56 330

@dotfivesix

Posted

@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 not http://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

@naufalf25

Posted

@DarkDev56 Alright, thanks for your solution. Its very helpful for me :D

1
DarkDev56 330

@dotfivesix

Posted

@naufalf25 No problem, glad it helped :)

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join 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