Question

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

var JSON = [{“name：”A“，”url“：”... / a.jpg“}，{”name：“B”，“url”：“... / b.jpg “}，{” 名称： “C”， “URL”： “... / C.JPG”} 我想迭代这个对象，获取名称和URL，并希望将名称和URl附加到我的HTML中的div（带有一些div ID）。详细的代码会有所帮助。感谢您的帮助。

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

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

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

迭代json对象并将每个对象（Image）附加到HTML div标签

3 个答案: