The Power of Borrowing Others Data

Today we start our journey with API’s and fetching. In layman's terms, we are learning how to go out and grab a big data set from somewhere else, pull it in to our own code, and display the parts we want. An API is essentially someone else’s data or dataset. At this point my overall understanding is still very high level. In terms of code we have to tell the JS to fetch some data from an API, wait for it to come back with a .then (This is a key step. JS wants to try and execute things as quickly as possible, so we have to tell it to hold up using .then), use json to make sense of it all, wait for that to happen with a .then, and finally we have an object we can use that contains a bunch of data.

fetch('API_URL')
.then( function(response){
return response.json()
})
.then(function(json){
//Everything manipulating the object that we just pulled from the API is done in here.
})

The first hard lesson I learned from the daily project is that everything we want to do with the data we just fetched, has to be done in the final .then function. In hindsight is makes sense when you consider scope.

Another new trick that we learned today is incredibly valuable in the way of writing HTML using JS. We first learned the DOM and had to create elements line by line, insert them, and sometimes it got very messy remembering where things were and how they nested. Today we learned about .insertAdjacentHTML(). With this function we are able to pick an HTML element (using querySelector) and then insert in block of HTML code that we write into a variable in JS.

const html = //write HTML as you normally would that gets inserted
`<div class="character">
<div class="name">
<a href="${json.url}">${name}</a>
</div>
<div class="year">
${birth_year}
</div>
</div> `
document.querySelector("//any class or ID").insertAdjacentHTML('afterbegin', html)

I also learned what all the $ were about that I see in actual website’s JS. It is essentially how JS variables are called into HTML.

I was quite in impressed with the project we did today. We took about 20 lines of HTML and pulled in a random person generator (an API) and populated a page with their pictures and demographic info. My JS wrote probably 100+ lines of HTML for me. Felt really good for that to be done.

I found the Dungeon and Dragons (DnD) API that contains all the standard reference guide information. I am going to start messing around with it tonight so I can try and reinforce the things we learned today.

Overall, I feel cautiously good about today. I feel like I’m barely grasping the topics covered today, and at any moment I could forget them or cease to understand them. With the great power that API opens up to us, I am scared of how big the weekly project will be tomorrow.