[英]How do I append a range of JSON data to my HTML using Javascript or Jquery?
What I am trying to do is to break-up what I grab from my JSON file. 我想做的是分解从JSON文件中获取的内容。 For example say my JSON data looks like this: 例如说我的JSON数据如下所示:
{
"paintings": {
"painting": [
{
"title": "Boardwalk 5",
"artist": "Arnie Palmer",
"image": "ap1.jpg",
"price": 850
},
{
"title": "A Lasting Piece",
"artist": "Arnie Palmer",
"image": "ap2.jpg",
"price": 450
},
{
"title": "Surf at High Tide",
"artist": "Arnie Palmer",
"image": "ap3.jpg",
"price": 950
},
{
"title": "The Games We Play",
"artist": "Arnie Palmer",
"image": "ap4.jpg",
"price": 850
}
]
}
}
I want append to <div class="area1">
the first 2 items in my JSON array then append items 3 and 4 to <div class="area2">
. 我想将JSON数组中的前2个项目附加到<div class="area1">
,然后将项目3和4附加到<div class="area2">
。 Here is how I am pulling all my data: 这是我提取所有数据的方式:
$(document).ready(function () {
$.ajax({
type: 'GET',
url: 'data.json',
dataType: 'json',
success: jsonParser
});
});
function jsonParser(json) {
$('#load').fadeOut();
$.getJSON('data.json', function(data){
$.each(data.paintings.painting, function(k,v){
var title = v.title;
var img = v.image;
var price = v.price;
///here is where I need help
$('.area1').append('<div class="painting"><img src="images/' + img + '" width="200" height="225" alt="' + title + '" /><br/><div class="title">' + title + '<br/>$' + price + '</div></div>')
});
});
}
And here is my HTML: 这是我的HTML:
<body>
<div class="area1">...first half of JSON data here... </div>
<div class="area2">... second half of JSON data here </div>
</body>
So one JSON file with the data broken up then appended to two areas 因此,一个JSON文件的数据被分解,然后附加到两个区域
You just need to check the index ( k
) in your each()
function to decide which area to add to: 您只需要检查each()
函数中的索引( k
)即可确定要添加到哪个区域:
$.getJSON('data.json', function(data){
$.each(data.paintings.painting, function(k,v){
var title = v.title;
var img = v.image;
var price = v.price;
// k is the index in the array. indexes 0 and 1 go to area1. 2 and 3 go to area2
var areaid = k < 2 ? '.area1' : '.area2';
$(areaid).append('<div class="painting"><img src="images/' + img + '" width="200" height="225" alt="' + title + '" /><br/><div class="title">' + title + '<br/>$' + price + '</div></div>')
});
});
Try this: 尝试这个:
<script>
var url = "json.json";
$.getJSON(url, function(data) {
$.each(data.paintings.painting, function(k, v) {
var title = v.title;
var img = v.image;
var price = v.price;
if (k < 2) {
$('.area1').append('<div class="painting"><img src="images/' + img + '" width="200" height="225" alt="' + title + '" /><br/><div class="title">' + title + '<br/>$' + price + '</div></div>');
} else {
$('.area2').append('<div class="painting"><img src="images/' + img + '" width="200" height="225" alt="' + title + '" /><br/><div class="title">' + title + '<br/>$' + price + '</div></div>')
}
});
});
</script>
A bit more verbose than @Rhumborls solution. 比@Rhumborls解决方案更详细。
$.getJSON('data.json', function(data) { $.each(data.paintings.painting, function(k, v) { var title = v.title; var img = v.image; var price = v.price; var areaid; switch (k) { case 0: case 1: areaid = '.area1'; break; case 2: case 3: areaid = '.area2'; break; } $(areaid).append('<div class="painting"><img src="images/' + img + '" width="200" height="225" alt="' + title + '" /><br/><div class="title">' + title + '<br/>$' + price + '</div></div>') }); });
Or even more scalable 甚至更具可扩展性
$.getJSON('data.json', function(data) { $.each(data.paintings.painting, function(k, v) { var title = v.title; var img = v.image; var price = v.price; // We figure out the area to append to by rounding down to nearest 10 and plus by 1 // key of 0-9 becomes 1, key of 10-19 becomes 2 ie var areaid = '.area' + (Math.round(k / 10) + 1); $(areaid).append('<div class="painting"><img src="images/' + img + '" width="200" height="225" alt="' + title + '" /><br/><div class="title">' + title + '<br/>$' + price + '</div></div>') }); });
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.