Skip to content
Submitted over 2 years ago

React.js, styled-components, javascript

Isaac C Anyim•210
@CreatorLZ
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Expenses chart component
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

Solution retrospective

I've got no clue on how to use fetch api. previously, i had only used axios to make server requests and could not employ it in this project. i had to improvise and convert the data.json file to data.js and map through its content.

Community feedback

  • Grant Ramsay•280
    @seapaganPosted over 2 years ago

    Using fetch to get a local JSON file is not so complicated; just remember it returns a promise, so you should await it and then convert it back to JSON. For the provided file it can be done in one line :

    const data = await fetch("data.json").then((res) => res.json());

    Then just iterate over the data object using a forEach or similar. You may need to specify a path for the JSON file depending on where you put it in relation to your component.

    Marked as helpful
    1
    Isaac C Anyim•210
    @CreatorLZPosted over 2 years ago

    @seapagan Thanks man. I'm using this in whatever I'll build next

    1
    Grant Ramsay•280
    @seapaganPosted over 2 years ago

    @CreatorLZ you're very welcome 😀

    0

Please log in to post a comment

Log in with GitHub

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