Expenses chart component

Community feedback

• 

  Elaine•11,400

  @elaineleungPosted over 2 years ago

  Hi Macdeesh, I checked out the app but it looks like the bars are all of the same height, just like what the screenshot shows. Were you able to get this working in your local dev environment? You might need to check whether the data in the .json file could be accessed. Hope to check this out again once everything is working!

  1

  ---

  

  Macdeesh•610

  @macdeeshPosted over 2 years ago

  @elaineleung Hi Elaine, thank you for checking my solution and for your feedback. Sincerely, I feel confused since it's the first time I use JSON. The Bars are working well in desktop version, but not at all in mobile, and I really don't know why. For the screenshot, I think it's because it's taken without waiting the page to be fully loaded, I had this issue before, with a challenge using just CSS. If you want to have a look at this old challenge (desktop version), and let me know if you know how to fix it, I will appreciate a lot. Thank you . https://www.frontendmentor.io/solutions/fylo-data-storage-component-HJovY-BI5

  1

  

  Elaine•11,400

  @elaineleungPosted over 2 years ago

  @macdeesh I checked out your Fylo app on Firebox, and I see the same thing as the screenshot where there's no gradient bar, but everything is fine when I use Chrome. So I used Chrome to view your expenses app and I could see it all working.

  Anyway, for the Fylo app, I think you may have to add some browser properties such as -moz-animation:. For the JSON here, this might be of interest to you: https://forum.freecodecamp.org/t/how-do-i-import-data-from-json-to-javascript/526050/5

  In short, try using the fetch API and see what happens, as that should work on Firefox and Chrome. In case you've never used fetch before, you can do something like this:

  fetch("./data.json")
      .then((response) => {
        return response.json();
      })
      .then((data) => {
        console.log(data);
      })
      .catch((error) => console.log(error));
  

  1

  

  Macdeesh•610

  @macdeeshPosted over 2 years ago

  @elaineleung Thank you for your help, I spent 2 hours searching how to get the values of the JSON file and store it in a variable, after using the fetch method, but in vain. I'm really confused, can't find any source to show me how to use the data instead of just console.log it. I think I'm understanding things in a wrong way.

  0

  

  Elaine•11,400

  @elaineleungPosted over 2 years ago

  @macdeesh No worries, I think it's because the fetch method involves understanding how asynchronous JS works and also the concept of promises. Basically, after retrieving the data, you need to do something with your data, and that's where you can bring in your function.

  Try this in your code (and try to use let in places where you use var):

  const spanAmount = document.querySelectorAll(".amount");
  const spanGraphic = document.querySelectorAll(".graphic");
  const total = document.querySelector(".total-week-expense");
  const average = document.querySelector(".average");
  const weekDays = document.querySelectorAll(".one-day");
  const today = new Date(); // get the actual date 
  
  function getData() {
    fetch("./data.json")
      .then((response) => {
        return response.json();
      })
      .then((data) => {
        console.log(data) // if you see an array here, then all is well!
        weekValue(data)  // this is your main function where we pass in the data
      })
      .catch((error) => console.log(error));
  }
  
  getData();
  
  function weekValue(dataExpenses) {
      let arrayOfAmounts = [];
      let arrayOfDays = [];
      let sumOfExpenses = 0;
  
      for (let i = 0; i < dataExpenses.length; i++) {
          arrayOfDays.push(dataExpenses[i].day);
          arrayOfAmounts.push(dataExpenses[i].amount);
          sumOfExpenses += arrayOfAmounts[i]; 
      }
     // rest of your code
  }
  
  // you may not need the window event listener loading but in case you do, here it is:
  
  window.addEventListener('load', getData);
  
  // add the rest of your code
  
  

  Let me know how it goes, and if it doesn't work we'll try something else 😂

  2

  

  Macdeesh•610

  @macdeeshPosted over 2 years ago

  @elaineleung Thank you So much !! Finally, It works very good now thanks to you !! Your help was really valuable.

  1

  

  Elaine•11,400

  @elaineleungPosted over 2 years ago

  @macdeesh OK phew, great! Glad I could help 😊

  0