I am currently attempting to display JSON file data in a circular manner using JavaScript, one by one. However, I am having difficulty achieving this. Currently, I can either show all the data at once or just the first data using the JavaScript Slice function.
How can I loop through the data circularly and display one item at a time? Below is my code snippet. At the moment, this code limits the display to only 1 item. If I remove the slice function, I can see the entire dataset.
$(document).ready(function(e) {
//jobs('experiment','assets/js/job.json');
$('.announce-section').addClass('zoom');
$.getJSON("assets/js/job.json", function( result ){
$('#wrapper header').html(result.title);
$('#wrapper h2').html(result.subtitle);
var rlength = result.jobs.length;
alert(rlength);
$.each(result.jobs.slice(0,1), function(key, field){
var jlength = result.jobs.length;
var img = field.image;
$('.pattren').append('<div class="data screen'+key+'"></div>');
if(img !='')
{
$('.pattren .data').append('<img src="assets/img/'+field.image+'" />');
}
$('.pattren .data').append('<ul><li>'+field.label_1+'<span>'+field.description_1+'</span></li><li>'+field.label_2+'<span>'+field.description_2+'</span></li><li>'+field.label_3+'<span>'+field.description_3+'</span></li><li>'+field.label_4+'<span>'+field.description_4+'</span></li></ul>');
});
});
});