Web_Developer_Chronicles_2_fetch(API)

This week has been tough! The demands of this commitment rival that of being a father and a husband, and it can be difficult to balance them each day. I have to constantly keep in mind that I am doing this for the betterment of myself, and in turn, this will allow me to better provide for my family. 

I finished the module on Asynchronous Web Apps, and much like a lot of the other covered material thus far, am in amazement. It's crazy to think about how simple an API can be. A request for information, that with the right touch of jQuery allows one to get a very refined and tailored view of data. 

What I found and find to be most frustrating is the varying degree of documentation when dealing with one API over another. I found that some had dozens of pages even before getting to query information, and others that had barely two paragraphs. I hope that I can live up to my expectations if or when I start making API's and making documentation. I also found the magnitude of available APIs to be overwhelming in quantity, but when looking at programmableweb.com found that the lack of documentation made it harder to understand as well as to sort through or to find. 

I had to get creative and push my capabilities this week with jQuery and JavaScript at the end of the module and the assignment. I have learned that although it's best to avoid Global Variables, I have also found that they can be very helpful, and it proved once again to be what saved me.

In my National Parks Search Engine, I needed to use a Global Variable 'choices' as a way of allowing the user to add additional inputs as a way of expanding the search queries when fetching from the National Parks API. This Global Variable was crucial to assign the correct "for", "name", "Label" and "ID" to each additional input. The start of my JavaScript function for my template looked like this:

This was more importantly followed by for loops in three places. 

One in my event listener for submission of the form where I needed to very specifically be able to dynamically read a random number of values based on how many inputs user created:

The second was in my function to generate the URL to fetch. This needed the specific format the API requested with the States query at the start of the URL, which allowed me to use .prepend for the very first time:

The final instance was in my generating the HTML results <li> to append to my <ul> based on the JSON response: 

One challenge/aha moment I had was with .click(event) VS .on('click', event). This was a pesky problem that caused two issues I was able to finally figure out. One led to my form submission using enter on the keyboard adding another state-input field to be added instead of submitting. The other was that it was preventing the default behavior for inputs based on parameters I set up, like Max and Min, or required. The user was able to do anything with this field, and much like all the other hurtles I have had thus far, was a rather simple solution. 

After the challenges I faced, it was of great relief to be done, and now with this understanding am moving on to my first Capstone, and plan to make my first Asynchronous Web App. I will let you all know more about that in my next post.