Dynamically Generate Elements
This practical course explores a combination of multiple Web APIs that can be used to create dynamically generated elements on a page.
- Learn how to add an event listener to a button and reference a function to handle the event
- Learn how to create a fetch request to return JSON data
- Learn how to parse JSON with the .json() method
- Learn how to loop through parsed JSON data through the then statement
- Learn how to create a list item element within the for loop
- Learn how to extract specific parts of the parse data to use as text content for the list item
- Learn how to place the list item on the page within the unordered list element
This course is intended for anyone who wants to learn about creating and placing dynamically generated elements on a page.
Anyone with an interest in dynamically generated elements or Web APIs in general.
The following courses can be helpful in understanding the concepts presented in this course:
Introduction to Web APIs: Fetch API
Introduction to Web APIs: Event Listeners
Introduction to Web APIs: DOM Manipulation
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.
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.
Farish has worked in the EdTech industry for over six years. He is passionate about teaching valuable coding skills to help individuals and enterprises succeed.
Previously, Farish worked at 2U Inc in two concurrent roles. Farish worked as an adjunct instructor for 2U’s full-stack boot camps at UCLA and UCR. Farish also worked as a curriculum engineer for multiple full-stack boot camp programs. As a curriculum engineer, Farish’s role was to create activities, projects, and lesson plans taught in the boot camps used by over 50 University partners. Along with these duties, Farish also created nearly 80 videos for the full-stack blended online program.
Before 2U, Farish worked at Codecademy for over four years, both as a content creator and part of the curriculum experience team.
Farish is an avid powerlifter, sushi lover, and occasional Funko collector.