Extract data from json how to load more using javascript and jquery

Question

Hi, I am noob in javascript and am doing practice to improve my skills.

I made one sample project and extracted data from json using getJSON.

This worked fine, but I want to display the third index data first and leave the loadMore buttons onclick.

like First. I will have a "list 3 item" populated by json, after which I will need every 2 li to get the populated load on clickMore click ... here is my json array

[ { "imagepath" : "sample url", "heading" : "sample heading", "details" : "sample details" }, { "imagepath" : "sample url", "heading" : "sample heading", "details" : "sample details" }, { "imagepath" : "sample url", "heading" : "sample heading", "details" : "sample details" }, { "imagepath" : "sample url", "heading" : "sample heading", "details" : "sample details" }, { "imagepath" : "sample url", "heading" : "sample heading", "details" : "sample details" }, { "imagepath" : "sample url", "heading" : "sample heading", "details" : "sample details" }, { "imagepath" : "sample url", "heading" : "sample heading", "details" : "sample details" }, ] 

and here is a sample code

 $(document).ready(function(){ $('#fetchit').click(function(){ $.ajax({ url:"one.json", cache: false, dataType : "json", success :function(){ //alert('bf c') $('.hold').empty(); $.getJSON("one.json",function(data){ $.each(data ,function(i,value){ var list ="<li>" + "<img src'" + value.imagepath + "' alt=''/>" + "<span>" + value.heading + "</span>" + "<span>" + value.details + "</span>" $('.hold').append(list) }) }) }, error:function(xhr,status,error){ alert(xhr.status) } }) }) }); 

this code retrieves all json with one click, but I want to parse it or load it in parts on click. please help me with this using ajax getJSON or javascript. I can not do the logic loadMore, I know that we must do this with some kind of counter ...

Answer 1

Try the following: - http://jsfiddle.net/adiioo7/8erwrha2/

JS: -

 var json = [{ "imagepath": "sample url", "heading": "sample heading", "details": "sample details" }, { "imagepath": "sample url", "heading": "sample heading", "details": "sample details" }, { "imagepath": "sample url", "heading": "sample heading", "details": "sample details" }, { "imagepath": "sample url", "heading": "sample heading", "details": "sample details" }, { "imagepath": "sample url", "heading": "sample heading", "details": "sample details" }, { "imagepath": "sample url", "heading": "sample heading", "details": "sample details" }, { "imagepath": "sample url", "heading": "sample heading", "details": "sample details" }]; jQuery(function ($) { $.each(json, function (i, value) { var list = "<li class='hidden' >" + "<img src'" + value.imagepath + "' alt=''/>" + "<span>" + value.heading + "</span>" + "<span>" + value.details + "</span>" $('.hold').append(list); }); function loadMore(){ $(".hold .hidden").slice(0,2).removeClass("hidden"); } loadMore(); $("#btnLoadMore").on("click",loadMore); }); 

HTML: -

 <div class="hold"></div> <input type="button" id="btnLoadMore" value="Load More"/> 

CSS: -

 .hidden { display:none; }