Dataset Attributes? I Got That. Comments? I Want That.
Approaching the end of the first phase of this program, I was pretty nervous to get started on the final project. I had to build a Single Page Application that integrated 7 weeks of things that I learned so far. I wasn’t very confident in using fetch since it was something that I had just learned and there was still a lot of things about it that I didn’t understand.
Getting started with the project I had to choose a free API. I’m a big K-Pop stan so I decided to do my project on music, specifically the genre of K-Pop. This lead me to choose the itunes search API. Something that stood out to me, while building this project were dataset attributes.
Dataset attributes allow extra information to be stored on a standard HTML element. A dataset property on an element will return a DOMStringMap, which is just an object that contains all of the custom data attributes of that element. A data attribute is any attribute that has a prefix of data, a hyphen “-” and ends with a term. That term could be named anything that starts with a lowercase letter. In JavaScript, when retrieving that data, the syntax is simple. It is an object which allows you to access it using dot notation. You’ll have the element at the beginning then a dot “.” dataset in the middle and instead of a “-”, like you see in the name, you’ll have a “.” instead and at the end it’ll be whatever you named the term. Here’s an example:
In my project the default limit of data that my API returned was 50 so I decided to leave it at that and work with an array with 50 different objects. I was able to fetch the data successfully, but when I tried to use .map() to iterate through the array I was receiving an error that said .map() wasn’t a function. I thought that was weird and I was just missing a very important piece of information.
The reason I was getting the error was because the data was in an array called “results”. I didn’t realize that my object had a key. Moral of the story don’t overlook the small things.
For the data attributes in my project I chose to pick out the trackId and trackName. I made a 2nd fetch call later in my code and used interpolation in the fetch call to get data from that specific trackId. I thought it was a pretty neat trick that would be very helpful in the future. This was a SPA and the first project so I probably didn’t need to make that second fetch call and would’ve still been able to get the same end result.
In this project the JavaScript very heavy. It was where all the action was happening. I created a simple HTML document that had very few things in it. It had the title, a few header tags, and a button in the body. My CSS document only had the background color and a header tag. In my JavaScript file I had 4 event listeners and 2 fetch calls. I made the entire comment section in JavaScript and did this so that it only popped up when you clicked on a certain part of the page.
In the beginning I thought it would’ve been simpler to create a whole skeleton out of HTML to create a guideline of how you wanted your website to look. The CSS would be there to make it look appealing and give it some extra decoration. The JavaScript would make it come to life. I thought the amount of things in my project was going to be fairly equal regarding the HTML, CSS, and JavaScript. I did pretty much everything in the JavaScript file because it made it easier for me to work with. I was able to tell it to create or add an element to something whenever a button was pushed. Since we didn’t have to worry about the backend portion the DOM was like a big whiteboard.
The takeaways I got from this project was to not overlook the small details even when you think they’re not necessary. I think in anything code related it’s always the small things that make a huge impact. One misspelling or forgotten “)” and the whole program won’t run.