CODEWITHSUNDEEP
javascriptajaxhtmlapi
liza
liza

Reputation: 494

Fetch image url to image tag in HTML using api calls in Javascript?

I got json object, I want to fetch images from remote url to this img tag using api calls. The API link is https://api.github.com/emojis

    <div class="emoji">
          <ul id="emojiz"></ul>
          <span style="display:inline;"><img src=""></span>
          <span style="display:inline; "><img src=""></span>
          <span style="display:inline;"><img src=""></span>
          <span style="display:inline; "><img src=""></span>
    </div>

Javascript code is below:

fetch('https://api.github.com/emojis')
.then(response => response.json())
.then(data => {
 console.log(data) // Prints result from `response.json()` in getRequest
})
.catch(error => console.error(error))

Upvotes: 2

Views: 24028

Answers (3)

Bhagyashree Sarkar
Bhagyashree Sarkar

Reputation: 519

This will help you:

HTML

 <div class="emoji" id="emoji">
    <ul id="emojiz"></ul>
    <span style="display:inline;"><img src=""></span>
    <span style="display:inline; "><img src=""></span>
    <span style="display:inline;"><img src=""></span>
    <span style="display:inline; "><img src=""></span>
 </div>

JS:

fetch('https://api.github.com/emojis')
.then(response => response.json())
.then(data => {
    var div = document.createElement('div');
    
    div.innerHTML = '';
    
    for (var prop in data) {
       console.log(data[prop]);
       div.innerHTML +=
        '<span style="display:inline;"><img src="'+data[prop]+'"></span>';
    }
    document.getElementById('emoji').appendChild(div);
})
.catch(error => console.error(error))

Upvotes: 2

Sumesh TG
Sumesh TG

Reputation: 2575

<html>
 <head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <script>

$(document).ready(function(){

var images={};
fetch('https://api.github.com/emojis')
.then(response => response.json())
.then(data => {
images=data;
  Object.keys(data).forEach((key) => {
    var ele = document.createElement("span");
    var img = document.createElement("img");
    img.setAttribute("src", data[key]);
    ele.appendChild(img);
    var elem=document.getElementById('emoji').appendChild(ele);
  });
})
.catch(err => console.error(err));
 $("#searchBox").change(function(event){
    var searchTxt=$("#searchBox").val();
    $('#emoji').empty();
    setTimeout(function(){
     Object.keys(images).forEach((key) => {
     if(images[key].indexOf(searchTxt)!=-1){
        var ele = document.createElement("span");
        var img = document.createElement("img");
        img.setAttribute("src", images[key]);
        ele.appendChild(img);
        var elem=document.getElementById('emoji').appendChild(ele);
     }
    
  });
   },0);
 });
});
 </script>
 </head>
 <body>
<input type="text" id="searchBox" placeholder="search">
<div id="emoji">
          <ul id="emojiz"></ul>
          <span style="display:inline;"><img src=""></span>
          <span style="display:inline; "><img src=""></span>
          <span style="display:inline;"><img src=""></span>
          <span style="display:inline; "><img src=""></span>
</div>
 </body>
</html>

Please try this.

Upvotes: 3

Jitesh Manglani
Jitesh Manglani

Reputation: 485

fetch('https://api.github.com/emojis')
.then(response => response.json())
.then(data => {
 console.log(data) // Prints result from `response.json()` in getRequest
  Object.keys(data).forEach((key) => {
    var ele = document.createElement("span");
    var img = document.createElement("img");
    img.setAttribute("src", data[key]);
    ele.appendChild(img);
    //append ele to parent div
  });
})
.catch(error => console.error(error))

Upvotes: 2

Related Questions