Fetching and Appending to the DOM

In my current Javascript project at Flatiron, I’m tasked with grabbing data from an external API and manipulating it on a single page web application.

I love to read, so I was drawn immediately to the API that provides New York Times Best Sellers lists in their Books API. Before I made any request from their database, I grabbed the link to their API (as well as the personalized key) and assigned them to variables.

I did this for long-term flexibility, more than anything. Having this information broken up in separate variables allows me to call on them as needed without typing out the full address, and also allows me to mix and match should I ever want to request information from a different list.

Then I created a function to fetch my information:

I named my function “fetchFiction” since that’s the first list I’d be accessing. Inside the code-block, I invoked the fetch function, using my previously created variables (which are just URL’s as a string) as arguments. Fetch then sent a request to those URLs and returned the full data set.

Then I used the aptly named function .then to take that returned information (naming it “res”) and manipulate it into a parsable format using the .json function.

.Then (ya see what I did there?) I named that parsable data as “data”, and used it in my next function, “displayList.”

Before I go into what I did with it, I should show you where it’s heading…

TO THE DOM

Document_Object Model (DOM) programming is a structure of HTML elements nested on top of each other. It’s behind every webpage you view — even this one! (If you’re using Chrome, select View -> Developer -> Inspect Elements to see what I mean!)

Here you can see a selection of elements represented on the page I’m building upon loading. The headers, and buttons are at the top followed by what’s important to this task: the ordered list with id, “review-list.” It’s there that I’ll want to present information gleaned from the API.

Back to Javascript

In our fetchFiction function, we pulled and processed the data to a json format so it could be manipulated by my displayList function. This function drills down into the nested structure of data.results.books, which provides an array of the top 15 best-selling books on the day the request is made as objects.

I pass that array of books (objects) into my displayList function as an argument “books,” and set the “review-list” container to the variable “main.” Then, .forEach bookObject in the books array I do the following: create a list item (li) element for it, use dot notation to define attributes for those list items, append the list item as a child within the “review-list” html element.

e voila!

Since “review-list” is an ordered list element, each list item created is numbered as it’s appended to the DOM! We did it, gang!