Fetch data from json like load more using javascript and jquery

Question

Hi I am noob at javascript and doing practice for improving my skills.

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

It worked fine but w

Answer 1

Try this out:- 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 = "
" + "" + "" + value.heading + "" + "" + value.details + ""
        $('.hold').append(list);
    });

    function loadMore(){
        $(".hold .hidden").slice(0,2).removeClass("hidden");
    }

    loadMore();

    $("#btnLoadMore").on("click",loadMore);        

});

HTML:-

CSS:-

.hidden {
    display:none;
}