Definition Is Everything
My task today was to 1. request some data from a website, 2. loop through the articles, and 3. create list item elements with the content of the story. The major problem here was that I interpreted the word “content” as meaning I needed to embed the entire HTML/CSS into each list item in my own HTML template.
I first requested the data. Then, for each article, I requested that article’s html/css and tried to convert it into JSON formatting. This threw an error. After some googling, I figured out that there are two main types of response formats: 1. JSON and 2. HTML. From there, I converted it instead into serialized HTML. Then I realized that I can’t just append what I thought to be an object to my DOM template because it wasn’t an object. The serialized HTML was just a text representation of the HTML. After some google searching, I found that I needed to convert this into a javascript document object using a parser. After that, I was able to append all the articles into each respective list item on the template site. Unfortunately, one of the ten articles threw massive errors and froze the page.
I went too far down the rabbit hole. So, I looked back at the checkpoint and the question statement and it seemed plausible that what the question statement meant was to just add an anchor link on each list item that goes to each of the articles. I did it this way and the graders approved the submission. That was much easier and made sense given the context of the checkpoint examples.
The moral of the story here is twofold: 1. Be clear what the objective is. If unsure, make sure to ask and 2. Come back to the question statement and instructions often as reference points so that you don’t dive too deep into the wrong rabbit hole.
Besides these meta learning points, I learned how to request HTML/CSS data from a page and manipulate it back and forth from serialized to actual javascript DOM documents.