Display Images from JSON Array using JavaScript

Question

I tried to display an image from the image folder in JSON array to Javascript but I am not sure if I am getting the right path. When the click event happens, everything works except for the image is not showing in the <img id "picture">, the picture is not showing up in the img section of my HTML.

I tried to change the path to ../Images/room_1.jpg but it still not working.

FYI: I have a separate folder that stores images, both json and js are stored in the javascript folder. should I put the same image file in the javascript folder?

html

<h2>Select a Hotel</h2>
    <ul class ="hotels">
        <li><a href="#" id="marriott"> Marriott Hotel Rooms</a></li>
    </ul>
<h2 id="hotelName">Hotel</h2>
<h3>Adress: <span id="address"></span></h3>
<img id="picture">

Hotel.json

{
"hotels": [
    {
        "name": "Marriott",
        "address": "098 hollywood Street",
        "picture": "room_1.jpg"
    }

JS

async function getHotelData() {

    try {

        const response = await fetch('Javascript//hotel.json')
        return await response.json() 

    } catch (error) {
        console.error(error)
    }

}

let hotelData = {}

getHotelData().then(data => hotelData = data)
 

const hotelEvent = document.querySelectorAll("a").forEach(a => {
    a.addEventListener('click', hotelInfo )
})

function hotelInfo(event) {
    let hotelChoice = hotelData.hotels.find(hotel => {
        return event.target.id === hotel.name.toLowerCase()
        return event.target.id === hotel.address.toLowerCase()
        return event.target.id === hotel.picture.toLowerCase()

        
    })
    console.log(hotelChoice)

    document.querySelector("#hotelName").textContent = `${hotelChoice.name} Hotel`
    document.querySelector("#address").textContent = `${hotelChoice.address}`
    document.querySelector("#picture").innerHTML = `${hotelChoice.picture}`



}

Is the image path inside the JSON file relative the to HTML file? If not, it should be in order to make it work as the image is loaded by the HTML (kinda) and not by the JavaScript. — nickfla1
– nickfla1, Commented Apr 10, 2022 at 21:53
@nickfla1 what do you mean by relatives? do I need to add like an src tag in the HTML to make it work? — Gwen L.
– Gwen L., Commented Apr 10, 2022 at 21:56

nickfla1 · Accepted Answer · 2022-04-10 22:32:22Z

1

You need to set the src property to the image instead of setting its innerHTML.

A normal img tag would look something like this:

<img id="image" src="/path/to/image.png">

You need to replicate the same using JavaScript:

document.querySelector("#picture").innerHTML = `${hotelChoice.picture}`
// Becomes
document.querySelector("#picture").src = `${hotelChoice.picture}`

Also, pay attention to the image path inside the JSON file, it should be relative to the HTML document you're using it, not the JavaScript one. So if your images are stored inside a separate directory you should change the path inside your JSON file accordingly.

Example: If your HTML file is in the project root and there is an images folder, you JSON should be something like:

{
  "hotels": [
    {
      "name": "Something",
      "address": "Some Street, 12",
      "picture": "images/picture_name.jpg"
    }
  ]
}

edited Apr 10, 2022 at 22:32

answered Apr 10, 2022 at 22:21

nickfla1

18512 bronze badges

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

2 Comments

Gwen L. Over a year ago

the SRC tag is working !!! thank you so much!

Gwen L. Over a year ago

I can't believe it's just a simple fix

Collectives™ on Stack Overflow

Display Images from JSON Array using JavaScript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related