遍歷一個json對象並將每個對象（圖像）附加到一個HTML div標記

我的要求是：我有一個json對象，其中包含一些URL（URL是圖像的URL）及其名稱。我想迭代通過JSON對象並想要獲取URL的（只是一個圖像）並且想要將圖像附加到div中。因此，我可以從JSON對象中看到圖像。假設這是我的代碼遍歷一個json對象並將每個對象（圖像）附加到一個HTML div標記

var JSON = [{「name：」A「，」url「：」.../a.jpg「}，{」name：「B」，「url」：「 .../b.jpg「}，{」name：「C」，「url」：「.../c.jpg」} 我想遍歷這個對象，獲取名稱和URL，並且想要提前名稱和URL追加到我的HTML一個div（有一些DIV ID）。詳細代碼將是有益的。感謝您的幫助。

來源

2014-02-11 SomeDoubts

var data = [{name:"A",url:".../a.jpg"},{name:"B",url:".../b.jpg"},{name:"C",url:".../c.jpg"}]; 
var div = document.getElementById("#id"); 
data.forEach(function(item, index){ 
    div.innerHTML = div.innerHTML + ("Name:" + item.name + " URL:" + item.url + "<br>"); 
});

來源

2014-02-11 13:59:41

由拉傑什CP

function test() { 
    var JSON = [{ name: "A", url: "http://www.w3schools.com/images/pulpit.jpg" }, { name: "B", url: "http://www.w3schools.com/images/pulpit.jpg" }, { name: "C", url: "http://www.w3schools.com/images/pulpit.jpg" }]; 
    var element = $("#divID"); 
    $(myArray).each(function (key) { 
     html = ''; 
     html += '<div class="example_result notranslate" style="text-align:center">\n' 
     html += '\t<h2>' + JSON[key].name + '</h2>\n'; 
     html += '\t<img src="' + JSON[jey].url + '">\n'; 
     html += '</div>\n'; 
     html += '<br>\n'; 
     element.append(html); 
    }); 
}

來源

2014-02-11 14:44:22

但是，對於這個簡單的事情，我們需要包括JQuery庫嗎？糾正我，如果我錯了。 – Triode

這是明智的幫助，但我需要遍歷JSON對象（有3記錄在上面的例子中）創建一個「李」爲每個記錄（所以總共3立方米將被創建）和爲特定的li添加每個「名稱」和「url」，最後整個li必須附加到div的HTML中。 – SomeDoubts

啓發一個完整的例子：

<!DOCTYPE html> 
<html> 
    <head> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
     <script> 
      $(document).ready(function(){ 
       var jsonData = [{"name":"A","url":".../a.jpg"},{"name":"B","url":".../b.jpg"},{"name":"C","url":".../c.jpg"}]; 
       var imgContainer = $("#imgContainer"); 
       $.each(jsonData,function(key,value){ 
        console.log(imgContainer); 
        imgContainer.append('<img title="'+value.name+'" src="'+value.url+'" />'); 
       }) 
      }); 
     </script> 
    </head> 
    <body> 
     <div id="imgContainer"> </div> 
    </body> 
</html>

來源

2015-01-25 18:43:00 Dipak

遍歷一個json對象並將每個對象（圖像）附加到一個HTML div標記

回答

相關問題