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.

What did you try that did not work out for you? Please share your code? — Manish
– Manish, Commented Oct 14, 2019 at 9:13
Unfortunately I was struggling to find an example to help me out so that is why I posted my code on here. — RH2019
– RH2019, Commented Oct 14, 2019 at 9:17
stackoverflow.com/questions/14220321/… contains the basics you can start with. — Teemu
– Teemu, Commented Oct 14, 2019 at 9:19
Loop over the images array and append them to your div one by one to respective div as img tag or you can even set them ad div background image.. — Manish
– Manish, Commented Oct 14, 2019 at 9:20
Possible Duplicate of stackoverflow.com/questions/16825964/… if you are successfully get the response from API — Prashant Pimpale
– Prashant Pimpale, Commented Oct 14, 2019 at 9:22

Andy · Accepted Answer · 2019-10-14 09:26:26Z

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"/>

1 Comment

Mohammed Aadil Over a year ago

Please accept this answer for reference to other readers. Thank you.

sayalok · Accepted Answer · 2019-10-14 09:39:55Z

0

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

edited Oct 14, 2019 at 9:39

answered Oct 14, 2019 at 9:30

sayalok

9203 gold badges15 silver badges30 bronze badges

2 Comments

Andy Over a year ago

map's callback comes with its own index argument so you don't need to define it elsewhere: .map((item, index) =>

Andy Over a year ago

You might want to use forEach in this instance too if you're not returning anything from map.

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

1 Comment

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

2 Comments

Linked

Related