Photo by AbsolutVision on Unsplash

JSON, Async/Await & Hiding An API Key

Elle Hallal
Jan 9, 2019 · 3 min read

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');
  • 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]’:


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

Elle Hallal

Written by

Apprentice at 8th Light. Github: https://github.com/itsellej

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade