Easily load and display JSON data from an API endpoint.
##LazyJSON
Easily load and display JSON from a valid API endpoint.
After fruitless searches around the web for an easy to implement, lazyload-type plugin that interacted with JSON resources, I decided to create one. This plugin allows you to asynchronously load and paginate a JSON response from an API and display it on your site.
###Installation
Be sure you have the latest version of jQuery and the LazyJSON files included on your site.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="js/jquery.lazyjson.min.js"></script>
Due to same origin policy, remote API endpoints must support JSONP. Local API endpoints default to a plain JSON AJAX request, but you can force a local JSONP request if needed.
###Usage
####Quick Start
An example of basic setup - the bare necessities.
JSON RESPONSE
[
{
id: 0,
data: {
first_name: "Allison",
last_name: "Baggins"
}
},
{
id: 1,
data: {
first_name: "Arthur",
last_name: "Baggins"
}
},
]
HTML
<!-- your container must have an ID -->
<div id="lazyjson">
<!-- template -->
<!-- template ID uses prefix 'template-' and ID of container by default -->
<div id="template-lazyjson">
<h3>{{data.first_name}} {{data.last_name}}</h3>
<p>ID: {{id}}</p>
</div>
<!-- /template -->
</div>
JS
$( 'div#lazyjson' ).lazyjson({
api: {
uri: 'YOUR_API_ENDPOINT'
}
});
###Options
These are the available plugin options, with defaults set below.
$( 'div#lazyjson' ).lazyjson({
// Fire the first API call on page load
loadOnInit: true,
/*----------------------
* Templating
*---------------------*/
// The template element's ID prefix (e.g. "#template-lazyjson" for $('#lazyjson').lazyjson())
templatePrefix: 'template-',
// The loader element, will also accept a jQuery object
loader: '<div id="lj-loader" style="text-align:center;padding:20px;"><img /></div>',
// The URL or path to the loader image to assign to the loader object
loaderImg: null,
// Element displayed when results don't exist, will also accept a jQuery object
noResults: '<div id="lj-noresponse" style="text-align:center;padding:20px;"></div>',
// Text to display in default noResults element
noResultsText: 'No Results Found',
/*----------------------
* Effects
*---------------------*/
// The delay between display of animated results
delay: 50,
// Set an animation for result display, currently accepts 'slideDown' and 'fadeIn'
effect: null,
/*----------------------
* Pagination
*---------------------*/
pagination: {
// Turn pagination on or off
active: false,
// The # of pages to load on init
pages: 1,
// The # of results to load per page
count: 10,
// Append results to container without replacing current set
appendResults: false,
/*
Load Events
*/
// Activate lazy load, overrides other load events
lazyLoad: false,
// jQuery selector for next result set button
nextBtn: 'a.next',
// jQuery selector for previous result set button
prevBtn: 'a.previous',
// Set a custom load event (click, blur, focus, hover, etc.)
loadOnEvent: null,
// jQuery selector for the custom event target
loadOnTarget: null
},
/*----------------------
* API
*---------------------*/
api: {
// The API endpoint, local or remote
uri: null,
// GET or POST request
httpMethod: 'GET',
// Force JSONP on local requests
forceJSONP: false,
// Send pagination vars to API in AJAX request
pagination: false,
// Set key of current page # param sent in API request
pagesKey: 'page',
// Set key of limit param sent in API request
limitKey: 'limit',
// Set key of offset param sent in API request
offsetKey: 'offset',
// Additional params to send with each request
params: {}
},
/*----------------------
* Debug
*---------------------*/
// Turn debug mode on or off
debug: false,
/*----------------------
* Callbacks
*---------------------*/
// Fires after load event
afterLoad: function (res) {}
);