0

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.

RH2019
  • 119
  • 10
  • What did you try that did not work out for you? Please share your code? – Manish Oct 14 '19 at 09:13
  • Unfortunately I was struggling to find an example to help me out so that is why I posted my code on here. – RH2019 Oct 14 '19 at 09:17
  • https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call contains the basics you can start with. – Teemu Oct 14 '19 at 09: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 Oct 14 '19 at 09:20
  • Possible Duplicate of https://stackoverflow.com/questions/16825964/create-and-load-images-using-a-loop-in-javascript if you are successfully get the response from API – Prashant Pimpale Oct 14 '19 at 09:22

3 Answers3

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
Andy
  • 61,948
  • 13
  • 68
  • 95
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

sayalok
  • 882
  • 3
  • 15
  • 30
  • 1
    `map`'s callback comes with its own index argument so you don't need to define it elsewhere: `.map((item, index) =>` – Andy Oct 14 '19 at 09:36
  • 1
    You might want to use `forEach` in this instance too if you're not returning anything from `map`. – Andy Oct 14 '19 at 09:41
0

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);
});
Mohammed Aadil
  • 153
  • 7