How to add images from a JSON file to HTML using JavaScript

Question

I have a JSON file which includes 3 images however I am struggling to find an example on how to get them to display on my web page using JavaScript. My JSON file includes:

{
  "tiles" : [
  {
    "img" : "example1.jpg"
  },
  {
    "img" : "example2.jpg"
  },
  {
    "img" : "example3.jpg"
  }
 ]
} 

My HTML includes:

       <div class="tile-image1"></div>
       <div class="tile-image2"></div>
       <div class="tile-image3"></div>

And I have retrieved my JSON data through:

var requestURL = "https://api.myjson.com";
var request = new XMLHttpRequest();
request.open('GET', requestURL);
request.responseType = 'json';
request.send();

So what I am trying to achieve is to display an "img" to the class "tile-image1", a second "img" to the class "tile-image2", etc. Any help would be great.

Answer 1

Assign the images URLs to your CSS and add the name of the image class to the JSON instead. Then, when you iterate over the JSON, add the class name to the element.

 const data = {"tiles": [{"img": "tile-image1"},{"img": "tile-image2"},{"img": "tile-image3"}]} const root = document.querySelector('#root'); // Create the HTML by `map`ping over the tile data and // returning a string, not forgetting to join it up at the end const html = data.tiles.map(({ img }) => { return `<div class="tile ${img}"></div>`; }).join(''); root.insertAdjacentHTML('beforeend', html);

 .tile { width: 50px; height: 50px }.tile-image1 { background-image: url('https://dummyimage.com/50x50/000/ffffff.png'); }.tile-image2 { background-image: url('https://dummyimage.com/50x50/ffff00/fff.png'); }.tile-image3 { background-image: url('https://dummyimage.com/50x50/00ffff/fff.png'); }

 <div id="root"/>

Further reading

• map
• insertAdjacentHTML

Answer 2

First take a wrapper div. Then loop through all ur image and dynamically create your div and the inject it in ur html

const data = {
  "tiles" : [
  {
    "img" : "example1.jpg"
  },
  {
    "img" : "example2.jpg"
  },
  {
    "img" : "example3.jpg"
  }
 ]
}

var wraper = document.getElementById('wrapper');  // ur wrapper div
var elm;
data.tiles.map((item, index) => {                    // looping through all item 
  elm += `<div class="tile-image${index+1}">    
     <img src="${item.img}" />   
  </div>`
})
wraper.innerHTML = elm // inject all the html inside ur wrapper

Hope it helps

Answer 3

You need to append image tag since div do not have property to show images. You can do following to get images working in your html.

data = {
  "tiles" : [
  {
    "img" : "https://picsum.photos/200/300"
  },
  {
    "img" : "https://picsum.photos/200/300"
  },
  {
    "img" : "https://picsum.photos/200/300"
  }
 ]
};

data.tiles.forEach((item, index) => {
  let img = new Image();
  img.src = item.img;
  tile = document.getElementsByClassName('tile-image' + (index + 1))[0];
  tile.appendChild(img);
});