Introduction to Web APIs: Dynamically Generated Elements. A dynamically generated element is an HTML element that is created by the browser at runtime and not part of the source HTML. In this video, I'm gonna use the Fetch API to get some data from a server-side API. Once I received the response, I'm gonna take a part of that data and use it as content for some dynamically generated HTML elements.

Before I begin, I'm gonna do a quick tour of this environment. On the left, I have an HTML page, and that page has a button to Get Todos. Below the button is an unordered list container that I will use to store dynamically generated todos. To the right, I have two query selectors: one for the button, one for the todo container. I also have a requestUrl variable. And that is storing the URL that I'm going to fetch data from. Transitioning to another screen, here is the data from the fetch request. It's in the array of todo objects. And what I plan to do is to grab each title and use it as text content for each dynamically generated list item. 

Going back to the editor, I now have the JavaScript panel to the left, which has the selectors in the requestUrl. To the right, I have the output panel, which emulates the browser. I'm gonna begin by adding an event listener to the button. buttonEl.addEventListener and the event type that will be listened for is the click event. And I'm gonna reference a function named handleClick, which does not exist yet.

Above the EventListener, I will create the handleClick function const handleClick equals arrow function and inside of the arrow function, I'm gonna call fetch API. And with the fetch API, I will be passing in an argument of requestUrl. Fetch API returns a promise object, so I need to use the .then statement to handle that object. .then response, which is the argument for the promise object.

Now, arrow function and I will return response.json. The .json method parses the response from the fetch request and returns a promise object. So I need to use another then statement in order to handle the parsed data. .then using data as an argument, arrow function and now pausing. Knowing that I have an array of todo objects and I want to display the title of each one, I'm gonna loop through this array. For, parentheses, let i equals zero, semicolon, i less than data.length, semicolon, i++.

Earlier I mentioned that the todo container is an unordered list. Therefore, while the array is being looped through, I'm gonna create a list item for each todo. Let todo equal document.createElement, passing li for list item as an argument. Now I've created the element but I also need to set the text content for the element using the todo title. Todo.textContent equals, now pausing for a moment, while data is looped through, i represents the current index value. So I will type data at index of i, and because title is an object property, I will add .title.

Now the todo's ready and I need to attach it to the todosContainer. So I will type todosContainer.append, parentheses, passing through todo. Now, the code is ready, so I'm gonna review exactly what's gonna happen. I will click on the Get Todos button. An EventListener will be triggered, calling the handleClick function. That function will invoke the Fetch API. A response will be received that is a JSON array of todos. The todos will be parsed and stored into an array value called data.

The function will loop through data and for each loop, a list item will be created with the text content equal to the todos title and append that list item as the last child of the todos container. I'm gonna click on the Get Todos button and to the right, there's a list of todos. And that's it. Thanks for watching at Cloud Academy.