0

Doen anyone know how by clicking on “Load more” button additional items should load below the existing ones and “Load more” button should disappear. Additional items should be loaded from the provided JSON file (numbers.json).

[
    {
        "itemClass":"apps col-xs-6",
        "image_src": "images/1.png",
        "title": "One"
    },
    {
        "itemClass": "web col-xs-6",
        "image_src": "images/2.png",
        "title": "Two"
    },
    {
        "itemClass": "icons col-xs-6",
        "image_src": "images/3.png",
        "title": "Three"    
    }
]
MJH
  • 2,301
  • 7
  • 18
  • 20
user7338690
  • 1
  • Can you please include code here, like what you have, how you are loading data via Ajax Requests, etc. To have the best chance of getting an accurate answer, try to include a JsFiddle. – AP. Dec 24 '16 at 23:36

1 Answers1

0
$(document).ready(function () {
    $('#load-more').click(function() {

        $.getJSON( "numbers.json", function( data ) {
            console.log(data);
            var items = [];
            $.each( data, function( key, val ) {
                items.push( "<li id='" + key + "'>" + val + "</li>" );
            });

            $( "<ul/>", {
                "class": "my-new-list",
                html: items.join( "" )
            }).appendTo( "body" );

        });

        $(this).remove();
    });
});

In the above code the load more button(with id="load-more") get the data from the json file and adds it to the html then removes the button itself after loading the json.

shrestha_aj
  • 336
  • 3
  • 12
  • when i click button,button disappear but nothing show on the page.In console i've got this message : jquery.min.js:4 XMLHttpRequest cannot load file:///C:/Users/Joel/Desktop/FE/numbers.json. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource. – user7338690 Dec 25 '16 at 00:28
  • When running it in locally, you need to use a server to make http request for the json file – shrestha_aj Dec 25 '16 at 00:30
  • i used wamp as a server,but it doesn't work ,button disappear but nothing else happen – user7338690 Dec 25 '16 at 00:42
  • Is the json file in the same folder as your website? – shrestha_aj Dec 25 '16 at 01:34
  • If the file is in the same folder as the website then the cross origin problem should only appear if you are opening the file by double clicking it. If u are using wamp and running the website using localhost, this problem probably should not be there. – shrestha_aj Dec 25 '16 at 01:51
  • See this: http://stackoverflow.com/questions/10752055/cross-origin-requests-are-only-supported-for-http-error-when-loading-a-local – shrestha_aj Dec 25 '16 at 01:51
  • Now it's working,thanks. When i open console i got this message :Array[3]0: Object1: Object2: Object length: 3__proto__: Array[0] Do u know how to show all of this content from this number,json file on page(i guess some divs in html),but don't know what to do in js?Do you know maybe? Thanks a lot for help – user7338690 Dec 25 '16 at 04:09
  • the javascript above creates a ul list with the items in the file – shrestha_aj Dec 25 '16 at 10:06
  • If it works for you can you accept this answer. Thanks! – shrestha_aj Dec 25 '16 at 13:39
  • Ok ok,can u tell me how to show on page all the items from the ul list ? No,problem i'll accept ,u help me a lot,thanks – user7338690 Dec 25 '16 at 17:01