Event Images

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

Get event images

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
Javascript (babel-node)
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 images property of the response object.

  • Line 20: We render the image to the console using the HTML <img> tag. ...