From the course: Introduction to Web APIs
Unlock the full course today
Join today to access over 23,400 courses taught by industry experts.
Solution: Display data on a webpage - REST Tutorial
From the course: Introduction to Web APIs
Solution: Display data on a webpage
(upbeat music) - [Instructor] Okay, I hope you had some fun with the challenge. Let's look at how I would handle this. First, we need to get the price data from our API. So I'm going to create a variable for that and call it var price, and that's equal to JSON data. And then in brackets are items variable. So we get each item. And then the property is price. Next, we want to create an HTML element for this price. So I'm going to call this priceElement. And that's going to be equal to document.createElement. And for this element, we'll create an H6. That should be good to show the price and in pretty small font. Next, we need to add the price data to this price element. So priceElement.innerHTML, and that's going to be equal to price. Finally, we want to add this to the page. So document.body.appendChild, and we want to add the price element. Great. So now we've added this to the page. The last thing we wanted to…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Contents
-
-
-
-
-
(Locked)
API documentation2m 23s
-
(Locked)
Make a request to the API2m 36s
-
(Locked)
Filter the response with parameters3m 54s
-
(Locked)
Access data in the response2m 38s
-
(Locked)
Use the response data in HTML1m 47s
-
(Locked)
Loop through the response data4m 28s
-
(Locked)
Challenge: Display data on a webpage42s
-
(Locked)
Solution: Display data on a webpage1m 41s
-
(Locked)
-
-
-
-