Javascript

JSON and API’s

Review
 Review
● Requests ● Promises
○ Requests ○ Computer Time
○ Get Requests ○ Promises
○ Post Requests ○ Resolve/Reject
● Fetch ○ .then()
○ Fetch syntax
○ Callbacks
● Functions as Arguments
JSON
 JSON
JSON stands for Javascript Object
Notation. It’s a common data format when {
transferring information online. "glossary" : {
"Title": "example glossary" ,
"ID": "SGML",
Some alternative transfer formats: "SortAs": "SGML",
● XML (extensible markup language) "GlossTerm" : "Standard Generalized Markup
● YAML (yet another markup language) Language",

● BSON (Binary JSON) "Acronym": "SGML",

"Abbrev": "ISO 8879:1986" ,
● MessagePack
"GlossDef" : {
"para": "A meta-markup language, used to
Although JSON is literally Javascript, other create markup languages such as DocBook." ,
languages can use JSON as well. "GlossSeeAlso" : ["GML", "XML"]
}
}
}
 JSON Rules
JSON and Javascript Objects are slightly
different. JSON is very picky about syntax. {
"glossary" : {
"Title": "example glossary" ,
JSON has a file type (.json).
"ID": "SGML",
"SortAs": "SGML",
If you are writing one of these files, use this "GlossTerm" : "Standard Generalized Markup
syntax: Language",

● Key:Value pairs only! "Acronym": "SGML",

"Abbrev": "ISO 8879:1986" ,
● Only double quotes!
"GlossDef" : {
● All keys have (double) quotes! "para": "A meta-markup language, used to
● No functions! create markup languages such as DocBook." ,
● Curly braces for objects. "GlossSeeAlso" : ["GML", "XML"]
}
● Square brackets for arrays.
}
}
 JSON Bad/Good
missing quotes on key
{ {
extra
name: "Joe", comma not "name": "Joe",
permitted "age": null,
"age": null,
wrong data "birthday": 'Sat Nov 19
type
2022 14:20:01 GMT-0500
"birthday": new Date(), (Eastern Standard Time)'
}
"sayName": function(){},
}
function not permitted
Valid JSON
 Valid JSON
1. Go to https://codebeautify.org/jsonvalidator
2. Google an actor you know.
3. Create a JSON object that has the following keys (for them):
a. name (string)
b. birthMonth (number)
c. birthDay (number)
d. birthYear (number)
e. movies (array) at least 3 strings
4. Post a screenshot on here when you finish!

https://codebeautify.org/jsonvalidator
APIs
 APIs
User
API stands for Application Program Interface. It is the
channel of communication between two computer
programs.

Often a server that provides data on the internet is

called an API
Front End Back End
(Client) (Server / API)
When you learn node.js, you can make your own APIs.
For now, we will use APIs on the internet.

Database Back End

(Server / API)
 Requests and APIs
APIs are computer programs, made by people. They use server architecture and
infrastructure to handle data.

APIs take in requests and give out data. This data is in some format. (Eg, JSON, XML, etc.)

Some APIs are similar to others. But each API is unique. They often have a website or
documentation page to help users understand how to use it. As you work with more APIs you
will see similarities and differences between them.

At the end of the day, you need to read the documentation to figure it out…
API Keys
 API Keys
API keys are used by web services to
allow people to access an API.

Keys are used to identify the user (as you

have to sign up) and determine access
(depending on account settings). Good users following the terms and agreement.

By using keys, a site can allow some users

to have better access, and restrict or ban
other users.

API keys are very common in web

development. Bad users, hackers… get banned.
 My Own API Keys
API keys require a server to operate correctly.
Servers act as an inbetween for the user and the
data.

Also, servers can keep their code hidden, blocking

bad users (usually… except for hacking).

We don’t know how to do this yet, since this class

is about front-end Javascript, not back-end.

You will need to know node.js to make servers.

That will be later. For now we’ll use other people’s
APIs!
OpenWeather
 OpenWeather
1. Go to
https://openweathermap.org/api
2. Sign up for their service (free).
3. Go to dropdown… “My API keys”
4. Copy the key, paste it in a file (you
will need it soon).
5. Go to the api page, find “Current
Weather Data” and go to “API doc”.
6. Look for an example API call, fill out
the details, and go to that URL.
7. What do you see?
8. Try another location!

https://api.openweathermap.org/data/2.5/weather?q=Bishkek&appid=YOURAPIKEY
Using OpenWeather
 Using OpenWeather
1. We have a working API call. Now we
can write some javascript code that {
"coord": { "visibility": 10000,
displays the information on the page. "lon": 74.59, "wind": {

2. This is what the JSON looks like. },

"lat": 42.87 "speed": 2.69,
"deg": 159,
3. Try to console.log some basic details: "weather": [ "gust": 3.29
{ },
a. temperature "id": 804, "clouds": {

b. humidity "main": "Clouds", "all": 99

"description": "overcast clouds",
},
c. main weather "icon": "04n" "dt": 1668886748,

d. main description ],
} "sys": {
"type": 1,
e. wind speed "base": "stations", "id": 8871,
"main": { "country": "KG",
"temp": 279.26, "sunrise": 1668909575,
"feels_like": 277.22, "sunset": 1668944105
"temp_min": 279.26, },
"temp_max": 279.26, "timezone": 21600,
https://api.openweathermap.org "pressure": 1025, "id": 1528675,
"humidity": 75, "name": "Bishkek",
/data/2.5/weather?q=Bishkek&ap "sea_level": 1025, "cod": 200
"grnd_level": 935 }
pid=YOURAPIKEY
},
Building an App
 Building an App
1. Let's build an app to check the
weather at your location. {
"coord": { "visibility": 10000,
2. It will need an input for the location. "lon": 74.59, "wind": {

3. It will need a button to start. },

"lat": 42.87 "speed": 2.69,
"deg": 159,
4. It should display the basic details: "weather": [ "gust": 3.29
{ },
a. main weather "id": 804, "clouds": {

b. weather description "main": "Clouds", "all": 99

"description": "overcast clouds",
},
c. humidity "icon": "04n" "dt": 1668886748,

d. wind speed ],
} "sys": {
"type": 1,
e. time "base": "stations", "id": 8871,
"main": { "country": "KG",
5. You should be able to change the "temp": 279.26, "sunrise": 1668909575,

location and have new data show up. "feels_like": 277.22, "sunset": 1668944105
"temp_min": 279.26, },
"temp_max": 279.26, "timezone": 21600,
"pressure": 1025, "id": 1528675,
"humidity": 75, "name": "Bishkek",
"sea_level": 1025, "cod": 200
"grnd_level": 935 }
},
Q&A