Created
September 11, 2017 03:01
-
-
Save lilgreenland/c5715c27783a933ea64cee4909ddaefc to your computer and use it in GitHub Desktop.
How to use public JSON APIs
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<h1>How to Use Public JSON APIs</h1> | |
<p>We can query public databases and request data in the form of JSON. To learn about JSON read this <a href = 'https://data.nasa.gov/resource/y77d-th95.json'>MDN guide to JSON data</a></p> | |
<p><strong>JSON</strong>: (JavaScript Object Notation) is a lightweight data-interchange format. It is easy for humans to read and write. It is easy for machines to parse and generate.</p> | |
<p><strong>API</strong>: (Application Program Interface) is a set of routines, protocols, and tools for building software applications. An API specifies how software components should interact.</p> | |
<!-- <p>For more information read Eloquent Javascript on <a href ='http://eloquentjavascript.net/1st_edition/chapter14.html'>HTTP requests</a>. --> | |
<p>Open a public JSON API URL in a new tab to see the data. | |
<br>Example: <a href='http://anapioficeandfire.com/api/houses/378' target="_blank">http://anapioficeandfire.com/api/houses/378</a> | |
<br>Example: <a href='http://anapioficeandfire.com/api/characters/1303' target="_blank">http://anapioficeandfire.com/api/characters/1303</a> | |
</p> | |
<p><strong>JSON API lists:</strong> | |
<br><a href='https://github.com/toddmotto/public-apis'>https://github.com/toddmotto/public-apis</a> | |
<br><a href='https://www.programmableweb.com/'>https://www.programmableweb.com/</a> | |
<br><a href='https://data.nasa.gov/browse?limitTo=datasets'>https://data.nasa.gov/browse?limitTo=datasets</a> | |
<br><a href='https://dev.socrata.com/consumers/getting-started.html'>https://dev.socrata.com/consumers/getting-started.html</a> | |
<br><a href='https://www.opendatanetwork.com/'>https://www.opendatanetwork.com/</a> | |
</p> | |
<br> | |
<h2>Example Code</h2> generic function to request JSON: | |
<pre><code class="language-javascript"> | |
function loadJSON(path, success, error) { | |
var xhr = new XMLHttpRequest(); | |
xhr.onreadystatechange = function() { | |
if (xhr.readyState === XMLHttpRequest.DONE) { | |
if (xhr.status === 200) { | |
if (success) | |
success(JSON.parse(xhr.responseText)); | |
} else { | |
if (error) | |
error(xhr); | |
} | |
} | |
}; | |
xhr.open("GET", path, true); | |
xhr.send(); | |
} | |
</code></pre> | |
<br>calling the loadJSON function: (replace the URL) | |
<pre><code class="language-javascript"> | |
loadJSON('http://api.open-notify.org/iss-now.json', | |
function(data) { | |
console.log(data) | |
}, | |
function(xhr) { | |
console.error(xhr); | |
} | |
); | |
</code></pre> | |
<br>The JSON data is parsed into an object by the loadJSON function. | |
<pre><code class="language-javascript">data { | |
iss_position: { | |
latitude: "-41.2572", | |
longitude: "-112.0342" | |
}, | |
message: "success", | |
timestamp: 1490969278 | |
} | |
</code></pre> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
function loadJSON(path, success, error) { //generic function to get JSON | |
var xhr = new XMLHttpRequest(); | |
xhr.onreadystatechange = function() { | |
if (xhr.readyState === XMLHttpRequest.DONE) { | |
if (xhr.status === 200) { | |
if (success) | |
success(JSON.parse(xhr.responseText)); | |
} else { | |
if (error) | |
error(xhr); | |
} | |
} | |
}; | |
xhr.open("GET", path, true); | |
xhr.send(); | |
} | |
//the data for ISS is updated every second, they ask to not poll more then every 5 seconds | |
// loadJSON('http://api.open-notify.org/iss-now.json', | |
// function(data) { | |
// console.log(data) | |
// }, | |
// function(xhr) { | |
// console.error(xhr); | |
// } | |
// ); | |
//the data for ISS is updated every second, they ask to not poll more then every 5 seconds | |
// loadJSON('http://api.open-notify.org/astros.json', | |
// function(data) { | |
// console.log(data) | |
// }, | |
// function(xhr) { | |
// console.error(xhr); | |
// } | |
// ); | |
//for demo key 30 queries an hour and 50 a day MAX | |
//https://api.nasa.gov/index.html | |
//https://api.nasa.gov/api.html#apod | |
// loadJSON('https://api.nasa.gov/planetary/apod?api_key=DEMO_KEY', | |
// function(data) { | |
// console.log(data) | |
// }, | |
// function(xhr) { | |
// console.error(xhr); | |
// } | |
// ); | |
//'https://ssd-api.jpl.nasa.gov/doc/sentry.html' | |
//'https://ssd-api.jpl.nasa.gov/sentry.api' | |
//'https://ssd-api.jpl.nasa.gov/sentry.api?des=99942' | |
loadJSON('https://ssd-api.jpl.nasa.gov/sentry.api?all=1&ip-min=1e-3', | |
function(data) { | |
console.log(data.data[1].fullname) | |
}, | |
function(xhr) { | |
console.error(xhr); | |
} | |
); | |
//https://ndb.nal.usda.gov/ndb/doc/apilist/API-NUTRIENT-REPORT.md | |
// loadJSON('https://api.nal.usda.gov/ndb/nutrients/?format=json&api_key=DEMO_KEY&nutrients=205&nutrients=204&nutrients=208&nutrients=269&ndbno=01009', | |
// function(data) { | |
// console.log(data.report.foods) | |
// }, | |
// function(xhr) { | |
// console.error(xhr); | |
// } | |
// ); | |
// loadJSON('https://launchlibrary.net/1.2/launch/Falcon', | |
// function(data) { | |
// console.log(data) | |
// }, | |
// function(xhr) { | |
// console.error(xhr); | |
// } | |
// ); | |
//http://wheretheiss.at/w/developer | |
// loadJSON('https://api.wheretheiss.at/v1/satellites/25544', | |
// function(data) { | |
// console.log(data) | |
// }, | |
// function(xhr) { | |
// console.error(xhr); | |
// } | |
// ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/464612/prism.js"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
body { | |
font-family: "Helvetica", "Arial", sans-serif; | |
color: #333; | |
background-color: #fff; | |
line-height:1.4; | |
padding: 0.1em; | |
margin: 0 auto; | |
max-width: 500px; | |
} | |
pre { | |
overflow-x: auto; | |
} | |
a { | |
text-decoration: none; | |
color: #2793C7; | |
} | |
a:hover { | |
text-decoration: underline; | |
color: #000; | |
} | |
/* http://prismjs.com/download.html?themes=prism-okaidia&languages=markup+css+clike+javascript&plugins=toolbar */ | |
/** | |
* okaidia theme for JavaScript, CSS and HTML | |
* Loosely based on Monokai textmate theme by http://www.monokai.nl/ | |
* @author ocodia | |
*/ | |
code[class*="language-"], | |
pre[class*="language-"] { | |
color: #f8f8f2; | |
background: none; | |
text-shadow: 0 1px rgba(0, 0, 0, 0.3); | |
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; | |
text-align: left; | |
white-space: pre; | |
word-spacing: normal; | |
word-break: normal; | |
word-wrap: normal; | |
line-height: 1.5; | |
-moz-tab-size: 4; | |
-o-tab-size: 4; | |
tab-size: 4; | |
-webkit-hyphens: none; | |
-moz-hyphens: none; | |
-ms-hyphens: none; | |
hyphens: none; | |
} | |
/* Code blocks */ | |
pre[class*="language-"] { | |
padding: 1em; | |
margin: .5em 0; | |
overflow: auto; | |
border-radius: 0.3em; | |
} | |
:not(pre) > code[class*="language-"], | |
pre[class*="language-"] { | |
background: #272822; | |
} | |
/* Inline code */ | |
:not(pre) > code[class*="language-"] { | |
padding: .1em; | |
border-radius: .3em; | |
white-space: normal; | |
} | |
.token.comment, | |
.token.prolog, | |
.token.doctype, | |
.token.cdata { | |
color: slategray; | |
} | |
.token.punctuation { | |
color: #f8f8f2; | |
} | |
.namespace { | |
opacity: .7; | |
} | |
.token.property, | |
.token.tag, | |
.token.constant, | |
.token.symbol, | |
.token.deleted { | |
color: #f92672; | |
} | |
.token.boolean, | |
.token.number { | |
color: #ae81ff; | |
} | |
.token.selector, | |
.token.attr-name, | |
.token.string, | |
.token.char, | |
.token.builtin, | |
.token.inserted { | |
color: #a6e22e; | |
} | |
.token.operator, | |
.token.entity, | |
.token.url, | |
.language-css .token.string, | |
.style .token.string, | |
.token.variable { | |
color: #f8f8f2; | |
} | |
.token.atrule, | |
.token.attr-value, | |
.token.function { | |
color: #e6db74; | |
} | |
.token.keyword { | |
color: #66d9ef; | |
} | |
.token.regex, | |
.token.important { | |
color: #fd971f; | |
} | |
.token.important, | |
.token.bold { | |
font-weight: bold; | |
} | |
.token.italic { | |
font-style: italic; | |
} | |
.token.entity { | |
cursor: help; | |
} | |
pre.code-toolbar { | |
position: relative; | |
} | |
pre.code-toolbar > .toolbar { | |
position: absolute; | |
top: .3em; | |
right: .2em; | |
transition: opacity 0.3s ease-in-out; | |
opacity: 0; | |
} | |
pre.code-toolbar:hover > .toolbar { | |
opacity: 1; | |
} | |
pre.code-toolbar > .toolbar .toolbar-item { | |
display: inline-block; | |
} | |
pre.code-toolbar > .toolbar a { | |
cursor: pointer; | |
} | |
pre.code-toolbar > .toolbar button { | |
background: none; | |
border: 0; | |
color: inherit; | |
font: inherit; | |
line-height: normal; | |
overflow: visible; | |
padding: 0; | |
-webkit-user-select: none; /* for button */ | |
-moz-user-select: none; | |
-ms-user-select: none; | |
} | |
pre.code-toolbar > .toolbar a, | |
pre.code-toolbar > .toolbar button, | |
pre.code-toolbar > .toolbar span { | |
color: #bbb; | |
font-size: .8em; | |
padding: 0 .5em; | |
background: #f5f2f0; | |
background: rgba(224, 224, 224, 0.2); | |
box-shadow: 0 2px 0 0 rgba(0,0,0,0.2); | |
border-radius: .5em; | |
} | |
pre.code-toolbar > .toolbar a:hover, | |
pre.code-toolbar > .toolbar a:focus, | |
pre.code-toolbar > .toolbar button:hover, | |
pre.code-toolbar > .toolbar button:focus, | |
pre.code-toolbar > .toolbar span:hover, | |
pre.code-toolbar > .toolbar span:focus { | |
color: inherit; | |
text-decoration: none; | |
} | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment