Show first 10 item form json file

[Lowell130]

Hello how i can show first 10 item from json file and then show more with show more button?

var msnry = $grid.data('masonry');

$grid.infiniteScroll({
  path: function() {
    return 'data-amz.json';
  },
  // load response as flat text
  responseType: 'text',
  outlayer: msnry,
  status: '.page-load-status',
  history: false,
});

$grid.on( 'load.infiniteScroll', function( event, response ) {
  console.log( response )
  // parse response into JSON data
  var data = JSON.parse( response );
  // compile data into HTML
  var itemsHTML = data.Product.map( getItemHTML ).join('');
  // convert HTML string into elements
  var $items = $( itemsHTML );
  // append item elements
  $items.imagesLoaded( function() {
    $grid.infiniteScroll( 'appendItems', $items )
      .masonry( 'appended', $items );
  })
});

// load initial page
$grid.infiniteScroll('loadNextPage');

//------------------//

var itemTemplateSrc = $('#photo-item-template').html();

function getItemHTML( photo ) {
  return microTemplate( itemTemplateSrc, photo );
}

// micro templating, sort-of
function microTemplate( src, data ) {
  // replace {{tags}} in source
  return src.replace( /\{\{([\w\-_\.]+)\}\}/gi, function( match, key ) {
    // walk through objects to get value
    var value = data;
    key.split('.').forEach( function( part ) {
      value = value[ part ];
    });
    return value;
  });
}

[tanikazetacho]

Hello how i can show first 10 item from json file and then show more with show more button?

`var msnry = $grid.data('masonry');

$grid.infiniteScroll({ path: function() { return 'data-amz.json'; }, // load response as flat text responseType: 'text', outlayer: msnry, status: '.page-load-status', history: false, });

$grid.on( 'load.infiniteScroll', function( event, response ) { console.log( response ) // parse response into JSON data var data = JSON.parse( response ); // compile data into HTML var itemsHTML = data.Product.map( getItemHTML ).join(''); // convert HTML string into elements var $items = $( itemsHTML ); // append item elements $items.imagesLoaded( function() { $grid.infiniteScroll( 'appendItems', $items ) .masonry( 'appended', $items ); }) });

// load initial page $grid.infiniteScroll('loadNextPage');

//------------------//

var itemTemplateSrc = $('#photo-item-template').html();

function getItemHTML( photo ) { return microTemplate( itemTemplateSrc, photo ); }

// micro templating, sort-of function microTemplate( src, data ) { // replace {{tags}} in source return src.replace( /{{([\w-_.]+)}}/gi, function( match, key ) { // walk through objects to get value var value = data; key.split('.').forEach( function( part ) { value = value[ part ]; }); return value; }); }`

I have the same problem. Path only accepts a URL but not a JSON object.

Any ideas?

Thanks a lot .

Ps. The idea is that to make a faster load there will be a JSON content that will shoot and show fast, sadly '.infiniteScroll' is not ready to read a JSON.

[Lowell130]

maybe solution is load multiple json file

[desandro]

Given your code, I recommend creating another function for appending content from JSON, and call that directly with your initial data

$grid.on( 'load.infiniteScroll', function( event, response ) {
  // parse response into JSON data
  var data = JSON.parse( response );
  appendContent( data );
});

// append initial content from your initial JSON data here
appendContent( initialData )

function appendContent(data) {
  // compile data into HTML
  var itemsHTML = data.Product.map( getItemHTML ).join('');
  // convert HTML string into elements
  var $items = $( itemsHTML );
  // append item elements
  $items.imagesLoaded( function() {
    $grid.infiniteScroll( 'appendItems', $items )
      .masonry( 'appended', $items );
  })
}