Event Images

Let's learn to fetch and render images for events using the Discovery API.

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
Please provide values for the following:
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 array
if ("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 successful
if (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 ...