Displaying json images on a webpage

Sephiroth_dude · 06-05-2022 10:30PM #1

Really stuck, how can I display images on a webpage from json ? don't know what I'm missing

fetch('https://api.nasa.gov/mars-photos/api/v1/rovers/curiosity/photos?sol=3415&camera=mast&page=1&api_key=DEMO_KEY')
.then(response => response.json())
.then(data => {
    console.log(data)


    let elem1 = document.getElementById('image')
    data.photos.forEach(element => console.log(element.img_src))


    elem1.innerHTML += `<div class="image-list"><img src ="${data.img_src}"</div>`
    


    



    
})

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="image"></div>
    <script src="script.js"></script>
</body>
</body>
</html>

mk7r · 06-05-2022 10:47PM

You arent inserting the image src is your problem.

For your elem1.innerHtml src, the value would be: data.photos[1].img_src to get the second image for example. To get all the images you would need to create a for loop like so:

let elem1 = document.getElementById('image')

data.photos.forEach(element => elem1.innerHTML += `<div class="image-list"><img src ="${element.img_src}"</div>`)

Although this is a neater way of doing it:

let imageContainer = document.getElementById('image')

data.photos.forEach(element => imageContainer.innerHTML += `<img src ="${element.img_src}"</div>`)

Sephiroth_dude · 06-05-2022 10:56PM

https://www.boards.ie/discussion/comment/119026028#Comment_119026028

Thanks so much for you help! was at it all day and could not figure it out.

mk7r · 06-05-2022 11:05PM

Not a problem

Displaying json images on a webpage

Comments