title: Fetch data from json like load more using javascript and jquery
body: <p>Hi I am noob at javascript and doing practice for improving my skills. </p>
  
  <p>I made one sample project and fetched data from json using getJSON. </p>
  
  <p>It worked fine but what I want is to show 3rd index data first and rest onclick of loadMore button. </p>
  
  <p>like First I will have "3 list item" populated with json after that I would need every 2 li to get populated on loadMore click...here is my json array</p>
  
  <pre><code>[
  {
  "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"
  },
  ]
  </code></pre>
  
  <p>and here is sample code</p>
  
  
  
  <p></p>
  
  <pre><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 ="&lt;li&gt;" + "&lt;img src'" + value.imagepath + "' alt=''/&gt;" + "&lt;span&gt;" + value.heading + "&lt;/span&gt;" + "&lt;span&gt;" + value.details + "&lt;/span&gt;" 
                              $('.hold').append(list)
                              })
                          })
                      },
                      error:function(xhr,status,error){
                          alert(xhr.status)
                      }
                  })
              })
          });
  </code></pre>
  
  <p>this code is fetching whole json at one click but i want to parse it or load it in parts on click.
  please help me in this using ajax getJSON or javascript. I am unable to make the logic of loadMore, I know we have to do this by some counter...</p>