迭代json对象并将每个对象（Image）附加到HTML div标签 [英] Iterating through a json object and appending each object(Image) to a HTML div tag
问题描述
我的要求是：我有一个json对象，其中包含一些URL（URL是图像的URL）及其名称。我想遍历JSON对象并希望获取URL（除了图像之外）和想要将图像附加到div中。所以我可以看到JSON对象中的图像。
假设这是我的代码
My Requirement is : I have a json object which contains some URL(URL is the URL of a image) and their names.I want to iterate through the JSON object and want to get the URL's (nothing but a image) and want to append the image into a div.So that i can see the images from the JSON object. suppose this is my code
var JSON = [{name：A，url：... / a.jpg} ，{name：B，url：... / b.jpg}，{name：C，url：... / c.jpg}
我想遍历这个对象，获取名称和URL，并希望在我的HTML中将名称和URl附加到div（带有一些div ID）。详细的代码会有所帮助。
感谢您的帮助提前。
var JSON = [{"name:"A","url":".../a.jpg"},{"name:"B","url":".../b.jpg"},{"name:"C","url":".../c.jpg"} I want to iterate through this object, get the name and the URL and want to append the name and URl to a div(with some div ID) in my HTML. Detailed code would be helpful. Thanks for the help in advance.
推荐答案
一个完整的例子：
<!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>
这篇关于迭代json对象并将每个对象（Image）附加到HTML div标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
