Event Images
Let's learn to fetch and render images for events using the Discovery API.
We'll cover the following...
There are two approaches we can use to get images for an event:
- Use the information stored in the
images
property of the response object. - Use the event images endpoint.
For now, let's try using the first approach—getting the images through the images
property of the event details object:
Press + to interact
API_KEY
Not Specified...
EVENT_ID
Not Specified...
import fetch from "node-fetch";const endpointUrl = new URL("https://app.ticketmaster.com/discovery/v2/events/{{EVENT_ID}}");const queryParameters = new URLSearchParams({apikey: "{{API_KEY}}",});const options = {method: "GET",};async function displayEventImages(response) {try {const content = await response.json();// Checking whether the event has an images arrayif ("images" in content) {const imageUrl = content["images"][0]["url"];console.log(`<img src='${imageUrl}' width=500px'>`);} else {console.log("No images found for this event.");}} catch (err) {printError(err);}}async function getEventDetails() {try {endpointUrl.search = queryParameters;const response = await fetch(endpointUrl, options);const { status } = response;// Checking if the response was successfulif (status === 200) {displayEventImages(response);} else {printResponse(response);}} catch (error) {printError(error);}}getEventDetails();
The code above implements these actions:
Line 13: We define a function called
displayEventImages
that takes a raw API response as input.Line 15: We convert the raw response into JSON and store it in a variable
content
.Line 19: We extract the URL of an image from the ...