Incorporating a Random Image Generator API into JavaScript to show images on an HTML page

Question

Incorporating a Random Image Generator API into JavaScript to show images on an HTML page

I'm just starting out with programming.

Currently, I am working on a project for school that involves displaying random dog images using an API. However, I keep encountering a 404 error even though I can see the URL changing and the dog breed updating in the console log. Instead of the expected photo, I only see a broken image icon on my HTML page.

Below is the code snippet I have:

let xhrdog = new XMLHttpRequest();   //AJAX request for dog photos from API
xhrdog.onreadystatechange = function() {

  if (xhrdog.readyState === 4) {
    if (xhrdog.status === 200) {
      let ajdog = JSON.parse(xhrdog.responseText); 
      let image = document.createElement('img')
      image.src = ajdog   //xhrdog.responseText;
      let dog = document.getElementById('dog')
      dog.appendChild(image);
    }
  }
}

xhrdog.open('GET', 'https://dog.ceo/api/breeds/image/random');
xhrdog.send();

Any assistance or guidance on this issue would be highly appreciated.

javascript ajax api dom

Answer 1

Answer №1

You are so close to completing the task. The issue lies in the fact that the service is returning more than just the image URL, as you noticed in the console. It actually sends a JSON string, which you correctly parse.

Once parsed, you end up with an object, not just a plain string, stored in ajdog. Within this object, there is an element called 'message' that contains the direct URL to the dog image. So, make sure to access ajdog.message instead of just ajdog when setting the img.src.

Here's the modified snippet:

let xhrdog = new XMLHttpRequest(); //first ajax request, fetching dog photos from the API

xhrdog.onreadystatechange = function () {

if (xhrdog.readyState === 4) {

if (xhrdog.status === 200) {

let ajdog = JSON.parse(xhrdog.responseText);
console.log(xhrdog.responseText);//CHECK CONSOLE FOR RESPONSE
let image = document.createElement('img');

image.src = ajdog.message;   //xhrdog.responseText;

let dog = document.getElementById('dog');

dog.appendChild(image);

}
}

}

xhrdog.open('GET', 'https://dog.ceo/api/breeds/image/random');

xhrdog.send();

<div id="dog"></div>

Answer 2

You are so close to completing the task. The issue lies in the fact that the service is returning more than just the image URL, as you noticed in the console. It actually sends a JSON string, which you correctly parse.

Once parsed, you end up with an object, not just a plain string, stored in ajdog. Within this object, there is an element called 'message' that contains the direct URL to the dog image. So, make sure to access ajdog.message instead of just ajdog when setting the img.src.

Here's the modified snippet:

let xhrdog = new XMLHttpRequest(); //first ajax request, fetching dog photos from the API

xhrdog.onreadystatechange = function () {

if (xhrdog.readyState === 4) {

if (xhrdog.status === 200) {

let ajdog = JSON.parse(xhrdog.responseText);
console.log(xhrdog.responseText);//CHECK CONSOLE FOR RESPONSE
let image = document.createElement('img');

image.src = ajdog.message;   //xhrdog.responseText;

let dog = document.getElementById('dog');

dog.appendChild(image);

}
}

}

xhrdog.open('GET', 'https://dog.ceo/api/breeds/image/random');

xhrdog.send();

<div id="dog"></div>

Answer 3

Answer №2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fetch Random Dog Image</title>
</head>
<body>

    <img src="" alt="Random Dog Image">
    <script>
        //API to fetch random dog image
        async function randomDog(){
            //store the promise with URL
            const result = await fetch('https://dog.ceo/api/breeds/image/random').then((data)=>{
                return data.json()
            })
            //return an object
           return result
        }
        //get image element from DOM
        const img= document.querySelector('img')
        //this function is returning a promise 
        randomDog().then((data)=>{
            img.setAttribute('src',data.message)
        })
    </script>
</body>
</html>

Answer 4

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fetch Random Dog Image</title>
</head>
<body>

    <img src="" alt="Random Dog Image">
    <script>
        //API to fetch random dog image
        async function randomDog(){
            //store the promise with URL
            const result = await fetch('https://dog.ceo/api/breeds/image/random').then((data)=>{
                return data.json()
            })
            //return an object
           return result
        }
        //get image element from DOM
        const img= document.querySelector('img')
        //this function is returning a promise 
        randomDog().then((data)=>{
            img.setAttribute('src',data.message)
        })
    </script>
</body>
</html>

Incorporating a Random Image Generator API into JavaScript to show images on an HTML page

Answer №1

Answer №2

Similar questions

The server's response contained a MIME type of "application/octet-stream" that did not include JavaScript. Module scripts in HTML are subject to strict MIME type checking

Issues with IE not recognizing the appendChild() Javascript method

Using the getElementById function in javascript to modify CSS properties

How can I programmatically close an md-select when a button is clicked within the md-select?

When errors occur while printing HTML through an Ajax request, it can hinder the functionality of other JavaScript code

Using Javascript to dynamically add variables to a form submission process

Enhance Your Website with HTML and JavaScript

What is the browser location for storing JavaScript constants?

How can the propagation of swipe events from a child to a parent be prevented?

What is the reason for elements such as "if" and "else" not being visually

RXJS buffering with intermittent intervals

What is the best way to display the latitude and longitude values stored in my database on a Google Map interface?

Issues with the styling of HTML code

I find the SetInterval loop to be quite perplexing

Use the filter method to organize arrays into subarrays based on their length, filtering out those with a length greater than or

Building an LED display with three.js

Is there a way to ensure the code inside the success function of a promise object is executed before the code that comes after the function

How to Incorporate an Anchor Link into a Div as well as its Pseudo Element using CSS, Javascript, or jQuery

Exploring the integration of AJAX callbacks with ASP.NET User controls

What is the process for utilizing GruntFile.coffee and package.json to extract or create the Lungo.js example files?