SO - 30507057

by Arun P Johny

HTML

<button class="btn btn-primary" onclick="loadName();">Load more</button>
<div class="nameData"></div>

JavaScript

function loadName() {
    var $el = $(".nameData"),
        names = $el.data('names'),
        start = $el.data('start');

    console.log(names, start)
    if (names) {
        console.log(start, names.length)
        if (names.length > start) {
            $.each(names.slice(start, start + 6), function (i, item) {
                $el.append('<div>' + item.name + '</div>');
            });
            $el.data('start', start + 6)
        }
    } else {
        $.getJSON('http://www.json-generator.com/api/json/get/clmQuPCyGa?indent=2', function (data) {
            $.each(data.slice(0, 6), function (i, item) {
                $el.append('<div>' + item.name + '</div>');
            });
            $el.data({
                names: data,
                start: 6
            });
        });
    }
}