📝 Load JSON demo with responseBody

metafizzy · Jan 1, 2021 · 11d08f2 · 11d08f2
1 parent 5deb201
commit 11d08f2
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 10 deletions.
diff --git a/content/extras.hbs b/content/extras.hbs
@@ -133,30 +133,28 @@ let $container = $('.container').infiniteScroll({
   path: function() {
     return 'https://api.unsplash.com/photos?client_id=...&page=' + this.pageIndex;
   },
-  // load page as text
-  responseType: 'text',
+  // load page as JSON
+  responseBody: 'json',
   // disable history
   history: false,
 });
 
-$container.on( 'load.infiniteScroll', function( event, response ) {
-  // parse response text into JSON data
-  let data = JSON.parse( response );
-  // put that data into template
-  let itemsHTML = template.compile( data );
+$container.on( 'load.infiniteScroll', function( event, body ) {
+  // body is JSON, put that data into template
+  let itemsHTML = template.compile( body );
   // convert to jQuery object
   let $items = $( itemsHTML );
   // append items
   $container.infiniteScroll( 'appendItems', $items );
 });
 ```
 
-{{> edit-demo default="LLjYgG" vanillaJS="JJNNqP" }}
+{{> edit-demo default="ZEprdYX" vanillaJS="JJNNqP" }}
 
 <p>See additional demos:</p>
 
 <ul>
-  <li><a href="https://codepen.io/desandro/pen/QgMWzV/">Loading JSON with Masonry</a></li>
+  <li><a href="https://codepen.io/desandro/pen/abmqgWQ/">Loading JSON with Masonry</a></li>
   <li><a href="https://codepen.io/desandro/pen/LLyeJB/">Loading JSON with Masonry, vanilla JS</a></li>
 </ul>
 

diff --git a/content/options.hbs b/content/options.hbs
@@ -103,7 +103,7 @@ Disable appending by not setting <code>append</code>, for loading JSON or adding
 <p>Checks if Infinite Scroll has reached the last page. This prevents Infinite Scroll from requesting a non-existent page. <a href="events.html#last"><code>last</code> event</a> will be triggered when last page is reached. Enabled by default <code><span class="comment">checkLastPage: true</span></code>.</p>
 
 
-<p>When set to <code><span class="comment">checkLastPage: true</span></code> and <a href="#path"><code>path</code></a> set to a selector string, Infinite Scroll will check if the loaded page has the <code>path</code> selector. Requires <code><span class="comment"><a href="#responsetype">responseType</a>: 'document'</span></code>.</p>
+<p>When set to <code><span class="comment">checkLastPage: true</span></code> and <a href="#path"><code>path</code></a> set to a selector string, Infinite Scroll will check if the loaded page has the <code>path</code> selector. Requires <code><span class="comment"><a href="#responsetype">responseBody</a>: 'text'</span></code> and <code><span class="comment"><a href="#responsetype">domParseResponse</a>: true</span></code>.</p>
 
 <div class="duo example">
   <div class="duo__cell example__code">