WDD 330 | AJAX and the Fetch API

AJAX and the Fetch API

Overview

The modern user expects asynchronous delivery of content, regardless of the source. AJAX technologies including the modern Fetch API interface provide a flexible and simplified approach to consuming (requesting and receiving) resources across networks.

"Although X in Ajax stands for XML, JSON is preferred because it is lighter in size and is written in JavaScript. Both JSON and XML are used for packaging information in the Ajax model." ... "While Ajax is still useful, other APIs have been developed since 2005 that enable similar functionality, including the Fetch API and server-sent events." - MDN

Prepare

Reference: 📑AJAX - MDN
Reference: 📑Fetch API - MDN
Read: 📃Fetch Basics - What is AJAX and Fetch - WDD Learnings Modules - Thompson

Activity Instructions

Create the example activity from the Fetch Basics reading by creating a supporting HTML file that calls a JavaScript file that contains the example API fetch in the reading.
Confirm that the console.log statement containing "second: " results runs first and that result is still the null data type.
Review the console output for the Pokemon character given in the example.
Modify the URL variable to a different API endpoint by removing the specific Pokemon character reference. Take a look at the console output changes.
1. What is the total count value for Pokemon characters?
2. What number of Pokemon character records returned by default?

URL Hint

https://pokeapi.co/api/v2/pokemon

1. Total Pokemon Records Count

As of this writing the count was 1154.

2. Pokemon Record Limit

You can find this value listed as a queryString in the url value of the 'next' property. The limit is set to 20.

Output the list of Pokemon characters to the HTML document in a <select> element as options.

Example Solution

function doStuff(data) {
  results = data;
  console.log('first: ', results);
  results.results.forEach((pokemon) => {
    const div = document.createElement('div');
    div.textContent = pokemon.name;
    document.querySelector('main').appendChild(div);
      // assumes you have a <main> element in your HTML document
  });
}