遍历 json 对象并将每个对象（图像）附加到 HTML div 标签答案

【问题标题】：Iterating through a json object and appending each object(Image) to a HTML div tag遍历 json 对象并将每个对象（图像）附加到 HTML div 标签
【发布时间】：2014-02-11 13:26:48
【问题描述】：

我的要求是：我有一个 json 对象，其中包含一些 URL（URL 是图像的 URL）及其名称。我想遍历 JSON 对象并想要获取 URL（除了图像之外什么都没有）和想将图像附加到一个 div 中。这样我就可以看到来自 JSON 对象的图像。假设这是我的代码

var JSON = [{"name:"A","url":".../a.jpg"},{"name:"B","url":".../b.jpg "},{"name:"C","url":".../c.jpg"} 我想遍历这个对象，获取名称和 URL，并希望将名称和 URl 附加到我的 HTML 中的一个 div（带有一些 div ID）。详细的代码会很有帮助。提前感谢您的帮助。

【问题讨论】：

标签： javascript json image

【解决方案1】：

一个完整的例子：

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

【讨论】：

【解决方案2】：

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>");
});

【讨论】：

【解决方案3】：

灵感来自 Rajesh 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);
    });
}

【讨论】：

但是对于这个简单的事情，我们需要包含 JQuery 库吗？如果我错了，请纠正我..
这是非常有用的帮助，但我需要遍历 JSON 对象（如上例所示有 3 条记录）为每个记录创建一个“li”（因此将创建总共 3 个 li）并附加每个特定 li 的“name”和“url”，最后整个 li 必须附加到 div 的 HTML 中。