HTML 5, SASS, JS, JSON server

Community feedback

• 

  Faris P•2,810

  @FarisPalayiPosted about 3 years ago

  Like @nmorajda pointed out, http://localhost:3000/tracking won't work. It is because localhost only works on the computer that runs the code. i.e. it won't work when you host it.

  Here, you don't need to use localhost. You can simply fetch the json file by using the fetch api to do the job. json-server package is unnecessary here because it is only/mostly used for creating REST api endpoints for quick prototyping and mocking, so that you don't have to write server side code only to create api endpoints.

  You can just rewrite the getData function in to this:

  const API = "db.json";
  fetch(API)
       .then(response => response.json())
       .then(({ tracking }) => callback(tracking));
  

  If you were trying to learn how to host server-side code, and used json-server because you don't know backend, then go ahead and host it on Heroku or Google App Engine or any other platform you like. Just make sure that, you replace the http://localhost:3000/tracking with the url that you have given by the platform (for example: http://project-name.herokuapp.com/tracking). And also don't forget to add the start command. If you are using heroku, you can specify that in the Procfile. If you are using GAE, you will need to specify the runtime also(for eg: nodejs14), in the app.yaml file, and it will automatically look for the start command in the package.json and runs it. Hope it all make sense. If not, feel free to ask me for clarification.

  • Also, you don't need to upload(to github) or track node_modules folder. Because, as long as the packages are listed on the package.json, anyone can use npm install command to install all the packages. To tell git to not track, add node_modules/ to .gitignore file.

  Marked as helpful

  1

  ---

  

  ThanhVuong0904•465

  @ThanhVuong0904Posted about 3 years ago

  @FarisPalayi I will try it <3, thanks you for feedback

  1
• 

  nmorajda•945

  @nmorajdaPosted about 3 years ago

                      if(clickIndex === "weekly") {
                           timeFramesCurrent = timeframes.weekly.current;
                           timeFremesPre = timeframes.weekly.previous;
                      }
                           
                      else if (clickIndex === "daily") {
                           timeFramesCurrent = timeframes.daily.current;
                           timeFremesPre = timeframes.daily.previous;
                      }
                      else if (clickIndex === "monthly") {
                           timeFramesCurrent = timeframes.monthly.current;
                           timeFremesPre = timeframes.monthly.previous;
                      }
  

  can probably be written shorter and just as legible:

  const timeFramesCurrent = timeframes[clickIndex].current;
  const timeFremesPre = timeframes[clickIndex].previous;
  

  or maybe:

  const {current, previous} = timeframes[clickIndex]
  

  in the second case you have to rename the variables later in the code or

  const {current: timeFramesCurrent, previous: timeFremesPre} = timeframes[clickIndex]
  

  Marked as helpful

  0

  ---

  

  ThanhVuong0904•465

  @ThanhVuong0904Posted about 3 years ago

  @nmorajda Wow, I will try, thanks you so much

  0
• 

  nmorajda•945

  @nmorajdaPosted about 3 years ago

  Links don't work, I guess that's why:

  function getData(callback) {
     const API = "http://localhost:3000/tracking";
      ...
  

  and correct the errors visible in the report at the top.

  Happy codding :)

  0

  ---

  

  ThanhVuong0904•465

  @ThanhVuong0904Posted about 3 years ago

  @nmorajda When I "npm start" in my code, Links work. I don't know how to fix it's

  0