How to display images from API using Fetch API?

Question

First of all, I'm working with the Unofficial Xbox API and I'm trying to display the images from the endpoint example CLICK HERE that is provided inn the website.

So I'm using a button with callback to a Fetch API function:

document.getElementById('getScreenshots').addEventListener('click', getScreenshots);
    
    function getScreenshots(){
        // Get data from URL
        fetch('https://xboxapi.com/v2/screenshots/1144039928',{
            headers: new Headers({
                "X-Auth": "HERE-GOES-MY-API-KEY",
                "Content-Type": "application/json",
            })
        })
        .then((res) => res.json())
        .then((data) => {
            let output = '<h5>List of Recent Screenshots</h5>';
            data.forEach(function(screenshot){
                output += `
                    <ul>
                        <li>ID: ${screenshot.screenshotId}</li>
                        <li>Published at: ${screenshot.datePublished}</li>
                        <li><img src="${screenshot.uri}"></li>
                    </ul>
                `;
            });
            document.getElementById('screenshots').innerHTML = output;
        })
        .catch((err) => console.log(err))
    }

        <button id="getScreenshots">Get Screenshots</button>
        <ul id="screenshots"></ul>

but everytime that I try to request it, the images are not shown and the console trows me an error of 404 for each image. Here is what I'm talking about:

Can anybody help me with this?.

Thanks in advance.

UPDATE, this is the json data that I get when using Postman:

"thumbnails": [
    {
        "uri": "https://screenshotscontent-t5002.xboxlive.com/xuid-2535443387655711-public/29cd392a-6758-4926-8396-44aa77822ac6_Thumbnail.PNG",
        "fileSize": 0,
        "thumbnailType": "Small"
    },
    {
        "uri": "https://screenshotscontent-t5002.xboxlive.com/xuid-2535443387655711-public/29cd392a-6758-4926-8396-44aa77822ac6_Thumbnail.PNG",
        "fileSize": 0,
        "thumbnailType": "Large"
    }
],
"screenshotUris": [
    {
        "uri": "https://screenshotscontent-d5002.xboxlive.com/xuid-2535443387655711-private/29cd392a-6758-4926-8396-44aa77822ac6.PNG?sv=2015-12-11&sr=b&si=DefaultAccess&sig=5Is2Shl9m0c85yI0Vq%2BTRs3cuwYDvUR2BBWrD2%2FpkIw%3D",
        "fileSize": 1255362,
        "uriType": "Download",
        "expiration": "2018-08-29 04:51:56"
    }
],
"xuid": 2535443387655711,
"screenshotName": "",
"titleName": "Halo: The Master Chief Collection",
"screenshotLocale": "en-US",
"screenshotContentAttributes": "None",
"deviceType": "Durango",
"screenshotDetails": "https://xboxapi.com/v2/2535443387655711/screenshot-details/d1adc8aa-0a31-4407-90f2-7e9b54b0347c/29cd392a-6758-4926-8396-44aa77822ac6"

},

Are you sure screenshot.uri is defined? Could you provide API response JSON? — Igor
– Igor, Commented Aug 28, 2018 at 10:17
It was actually wrong, the right endpoint was screenshot.screenshotUris.uri but I stll get a 404 for each image... Check my updated question. — Kirasiris
– Kirasiris, Commented Aug 29, 2018 at 3:52
screenshot.screenshotUris.uri will be undefined because screenshot.screenshotUris is an array. So you need screenshot.screenshotUris[0].uri or making a cycle like screenshot.screenshotUris.forEach(function(el) { ...el.uri... }) — Igor
– Igor, Commented Aug 29, 2018 at 7:11
OMG, I would have never figured it out by myself. Big thanks. Can you copy and paste your comment to mark it an answer?....up to you but its solved now. — Kirasiris
– Kirasiris, Commented Aug 29, 2018 at 10:03

Igor · Accepted Answer · 2018-08-29 10:21:33Z

1

screenshot.screenshotUris.uri will be undefined because screenshot.screenshotUris is an array. So you need:

screenshot.screenshotUris[0].uri

or making a cycle like

screenshot.screenshotUris.forEach(function(el) { ...el.uri... })

answered Aug 29, 2018 at 10:21

Igor

8095 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to display images from API using Fetch API?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related