[英]How do I send HTML form data to JSON using javascript (without jquery)?
[英]How do I append a range of JSON data to my HTML using Javascript or Jquery?
我想做的是分解從JSON文件中獲取的內容。 例如說我的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
}
]
}
}
我想將JSON數組中的前2個項目附加到<div class="area1">
,然后將項目3和4附加到<div class="area2">
。 這是我提取所有數據的方式:
$(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>')
});
});
}
這是我的HTML:
<body>
<div class="area1">...first half of JSON data here... </div>
<div class="area2">... second half of JSON data here </div>
</body>
因此,一個JSON文件的數據被分解,然后附加到兩個區域
您只需要檢查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>')
});
});
嘗試這個:
<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>
比@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>') }); });
甚至更具可擴展性
$.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.