Freewall using json to display title, image id

Question

JSON

 {
      "items": 
      [
        {
          "name": "Project title",
          "id": 16,
          "image": "\u002fimages\u002fdefault.png",
        },
        {
          "name": "Project title",
          "id": 25,
          "image": "\xxx",

        },
 ]
}

JS

var wall = new freewall("#freewall");

      $('.add-more').click(function(){

          $.ajax({
          url: getDataUrl,
          type: 'GET',
          dataType: 'json',
          success: function( response ){

         for (var i = 0; i < 20; ++i) {
           $.each(response.items, function(index, value) {

           var tmp= '<div class="grid-container">';
            tmp+= '<div class="grid--tile">';
            tmp+= '<a class="overlay" href="portfolio/' + value.id +'"></a>"';
            tmp+= '<img src="'+value.image+'" width="100%" /></div>';
            tmp+= '<p class="title">'+value.name+'</p></div>';

          }
            wall.appendBlock( tmp );
            wall.refresh();
          }
           wall.fitWidth();
         },
          error: function(error) {
            console.log( error)
          }
        });
    });

1. Using freewall to append more images with title and id. Error on console says Uncaught syntaxError: Unexpected identifier . I checked code a few times but i don't see anything wrong?

2. How to start appending from the #20 onwards using json if click button? The template will display only 10 using url?max=10 . then it should check from #11 onwards for example and display 20 images (11 to 31) upon click button.

Help or guide appreciated!

Answer 1

There are several errors, You can optimize code as follows

var wall = new freewall("#freewall");

var img=0;

$('.add-more').click(function() {

    $.ajax({
        url: getDataUrl,
        type: 'GET',
        dataType: 'json',
        success: function(response) {
            $.each(response.items, function(index, value) {
                if (img<=index&&index<(img+20)) {
                    var tmp = '<div class="grid-container">';
                    tmp += '<div class="grid--tile">';
                    tmp += '<a class="overlay" href="portfolio/' + value.id + '"></a>"';
                    tmp += '<img src="' + value.image + '" width="100%" /></div>';
                    tmp += '<p class="title">' + value.name + '</p></div>'; 
                    wall.appendBlock(tmp);
                    wall.refresh();
                    i++;
                }
            });
            img+=20;
            wall.fitWidth();
        },
        error: function(error) {
            console.log(error)
        }
    });
});

Answer 2

I think you didn't properly close the **each statement**please go through the below code.

var wall = new freewall("#freewall");

      $('.add-more').click(function(){

          $.ajax({
          url: getDataUrl,
          type: 'GET',
          dataType: 'json',
          success: function( response ){

         for (var i = 0; i < 20; ++i) {
           $.each(response.items, function(index, value) {

           var tmp= '<div class="grid-container">';
            tmp+= '<div class="grid--tile">';
            tmp+= '<a class="overlay" href="portfolio/' + value.id +'"></a>"';
            tmp+= '<img src="'+value.image+'" width="100%" /></div>';
            tmp+= '<p class="title">'+value.name+'</p></div>';

          });
            wall.appendBlock( tmp );
            wall.refresh();
          }
           wall.fitWidth();
         },
          error: function(error) {
            console.log( error)
          }
        });
    });