JSON, Async/Await & Hiding An API Key

Share on facebook
Share on google
Share on twitter
Share on linkedin
Photo by AbsolutVision on Unsplash

This week’s challenge is to create a weather manager using Javascript. This quick blog consists of my understanding of JSON and Async/await so far.

In addition, I’ve included solutions for issues I’ve encountered when trying to complete the first core feature: Get London’s weather to display on a website using Open Weather Map https://openweathermap.org/api.

JSON — Javascript Object Notation

  • Consists of key-value pairs and stores it in plain text
  • JSON.parse() converts JSON text to JavaScript objects
  • JSON.stringify() converts a JavaScript object to JSON
  • .json()returns a promise
  • Useful resource — JSON Formatter Chrome Formatter

Async/await

async before a function means the function always returns a promise.

await works inside async functions. Makes JavaScript wait until that promise settles and returns its result.

await doesn’t work in the top-level code. It needs to be contained within an async function for the code that it’s waiting for.

Testing async await with Jest:

Test:
it('returns London temperature as a number', async () => {
    const londonWeather = await weather.londonWeatherForOneDay();
    expect(typeof londonWeather).toEqual('number');
  });

Hiding the API Key

  • Add .env to .gitignore
  • Install the dotenv module using npm install dotenv –save-dev
  • Install dotenv webpack npm install dotenv-webpack –save-dev
  • Add require(‘dotenv’).config() before declaring the class
  • Add the following to webpack.config.js:
Add to the top:
const Dotenv = require('dotenv-webpack');
-----
node: {
  fs: 'empty'
},
plugins: [
  new Dotenv()
]
  • Create .env and add the following in it:
API_KEY=insert api key here
  • Where needed, replace API key with process.env.API_KEY
  • Restart npm run watch

If .env file has been already committed:

  • Commit any code changes
  • Run git rm –cached .env
  • Run git add . and git commit -m “insert message here

To resolve ‘Error: Can’t resolve ‘fs’ in [path]’:

  • Install dotenv-webpack by running npm install dotenv-webpack –save

Other errors encountered:

ReferenceError: regeneratorRuntime is not defined:

Add the following to .babelrc

{
  "presets": [
    [
      "env", {
        "targets": {
          "node": "current"
        }
      }
    ]
  ]
}

ReferenceError: fetch is not defined:

  • Error encountered when testing async function
  • Run npm install node-fetch–save
  • Add const fetch = require(‘node-fetch’)at the top of the .js file containing the class and the corresponding test file

Useful resources: