Day 22

Pokemon AJAX APIs w/ jQuery

After taking the Red Belt Exam, we read on APIs which stands for Application Program Interface. APIs are the basis of modern application development. It is a set of rules that defines how a user interacts with a program. Think of a repository of information that you want and using jQuery to present this information on to the browser. We implement this feature by having this jQuery script tag in the HTML page:

<script src="https://code.jquery.com/jquery-2.1.3.js"></script>

Flowchart of AJAX Request

AJAX is Asynchronous Javascript and XML and is a web development technique that allows the user to not have to reload when sending and retrieving the data to the server or database. This is a departure from what we've done in all of our assignments so far since every time the user clicks a button or submits a form, the page reloads. Now, with AJAX, that won't be necessary.

Implementing AJAX is just writing Javascript functions in our script tags. The hard part of returning a JSON element from an AJAX request is traversing through all the information.

$.get("http://pokeapi.co/api/v1/pokemon/1/", function(res) {
    console.log(res.types[0].name);
    console.log(res.types[1].name);
}, "json");

Here's the breakdown of the API info request:

• .get('url', function(data_name) {function code}, "return json or XML element")
• .get is just to ask for the following API information, in this case the JSON of the pokemon API with the number 1 (bulbasaur!)
• The console.log is the traversal of the object.

Anyways, these were the basic information to get us started with AJAX and APIs. The assignments were pretty fun! We made a Pokedex based off the information we traversed through with JSON we got from the Pokemon API. A hard lesson I learned early on is that you should console.log a bunch in different areas of your jQuery code so that you know which functions or part of your jQuery is being ran. This helps debugging and troubleshooting your code!