JSON image importing

Question

I am trying to add 4 images on my site however the images are not loading. I can see 4 images in the inspector tool, however they are not showing up.

This is my code in JS:

function createZooland(zoolandData) {
    let content = document.getElementById("content");

let h2 = document.createElement("h2");
let h3 = document.createElement("h3");
let blockquote = document.createElement("blockquote");
let img = document.createElement("img");

h2.innerHTML = `${zoolandData[0].common_name}`;
content.appendChild(h2);

h3.innerHTML = `${zoolandData[0].scientific_name}`;
content.appendChild(h3);

blockquote.innerHTML = `${zoolandData[0].description}`; 
content.appendChild(blockquote);

for(let i = 0; i < zoolandData.length; i++){
    for(let j = 0; j < zoolandData[i].images["image"].length; j++){
        img.src = "images/" + `${zoolandData[0].images.image}`;
        

        content.appendChild(img);
    }
}

}

and this is the JSON it's referencing:

{
            "common_name": "Koala",
            "scientific_name": "Phascolarctos cinereus",
            "description": "Koalas are well-known...",
            "images": {
                "image": [
                    "koala1.jpg",
                    "koala2.jpg",
                    "koala3.jpg",
                    "koala4.jpg"
                ]
            }
        },

Please let me know if any additional information is needed. I'm not sure how to get the images to display.

Answer 1

You need to move img = document.createElement("img"); inside the loop

Or just do this

 const zoolandData = [{ "common_name": "Koala", "scientific_name": "Phascolarctos cinereus", "description": "Koalas are well-known...", "images": { "image": [ "koala1.jpg", "koala2.jpg", "koala3.jpg", "koala4.jpg" ] } }, { "common_name": "Dwarf wallaby", "scientific_name": "Notamacropus dorcopsulus", "description": "Native to New Guinea, it is the smallest known wallaby species...", "images": { "image": [ "wallaby1.jpg", "wallaby2.jpg", "wallaby3.jpg", "wallaby4.jpg" ] } } ]; content.innerHTML += zoolandData.map(entry => `<h2>${entry.common_name}</h2> <h3>${entry.scientific_name}</h3> <blockquote>${entry.description}</blockquote> ${entry.images.image.map(src => `<img src="images/${src}" alt="${src}" />`).join("")}` ).join("")

 <div id="content"></div>