أريد إحضار رابط الصورة إلى علامة الصورة في HTML باستخدام مكالمات واجهة برمجة التطبيقات في جافا سكريبت

2

حصلت على كائن json ، أريد جلب الصور من عنوان URL البعيد إلى علامة img هذه باستخدام مكالمات api. رابط واجهة برمجة التطبيقات هو 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>

شبيبة 

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))

3 الاجابة

2
افضل جواب

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

من فضلك جرب هذا.

:مؤلف
مشاركة الرابط
2
افضل جواب
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))
:مؤلف
مشاركة الرابط
1
افضل جواب

هذا سيساعدك:

لغة البرمجة 

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

شبيبة: 

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))
:مؤلف
مشاركة الرابط

أسئلة ذات صلة

أسئلة شائعة:

علامات السؤال:
فوق
قائمة طعام