How do I append a range of JSON data to my HTML using Javascript or Jquery?
Question
What I am trying to do is to break-up what I grab from my JSON file. For example say my JSON data looks like this:
{
"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"> . 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:
<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
3 answers
solution1
1 2014-10-28 12:33:18
You just need to check the index ( k ) in your each() function to decide which area to add to:
$.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>')
});
});
solution2
0 2014-10-28 12:36:30
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>
solution3
0 ACCPTED 2014-10-28 12:38:31
A bit more verbose than @Rhumborls solution.
$.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>') }); });
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How do I send HTML form data to JSON using javascript (without jquery)?
How do I display JSON file data into HTML table (using JavaScript only, not jQuery)
How to append json objects to html body using javascript? (No jQuery)
How to append the JSON data to HTML in JavaScript?
How do I append elements to an empty html file using javascript?
Using Javascript (no jquery) to append data from 2 json strings - append is not a function
How do I append a query parameter to my URL using Javascript?
How do I print my postman returned JSON array on my html using jQuery Ajax success?
How do I dynamically populate html elements with JSON Data with Javascript not jQuery?
Why can't I append to my JSON object? (jQuery/Javascript)
Related Tags