API command
Easely gather data from external API’s.
Basic Usage (HTML)
data-jkit="[api:value=count;url=http://domain.com/api.json]"
Advanced Init (JavaScript)
$('#myelement').jKit('api', { 'value': 'count', 'url': 'http://domain.com/api.json' });
Options
| Option | Values | Default | Description |
|---|---|---|---|
| format | “json” | json | The API format. Currently only json (jsonp) is supported |
| value | String | The value from the returned data to use | |
| url | String | The API url | |
| interval | Int | -1 | Set this to a positiv integer if you want to read the url more than once (in seconds) |
| macro | Macro name | This optional macro will be applied to the element after the data is loaded | |
| template | Template name | Optional name of an api template |
Events
| Event | Description |
|---|---|
| error | Triggered when an error occured |
| complete | Triggered after the API was loaded succesfully |
Examples
Social counts:
Load the twitter and facebook count for the url: http://news.ycombinator.com:
- Twitter count:
- Facebook shares:
Source:
<ul> <li>Twitter count: <span data-jkit="[api:format=json;value=count;url=http://urls.api.twitter.com/1/urls/count.json?url=http://news.ycombinator.com]"></span></li> <li>Facebook shares: <span data-jkit="[api:format=json;value=shares;url=http://graph.facebook.com/http://news.ycombinator.com]"></span></li> </ul>
Latest jKit commit:
Load the jKit repo data from Github and display the lastest commit message:
Latest jKit commit:
Source:
<p> Latest jKit commit: <span data-jkit="[api:format=json;value=data[0].commit.message;url=https://api.github.com/repos/FrediBach/jQuery-jKit/commits]"></span></li> </p>
All the latest jKit commits:
In this example we use a template to display the 10 latest Github commits of jKit:
loading …
Source:
<!-- defining our api template: --> <div class="box" rel="jKit[template:action=set;name=commits]" style="display:none"> <ul> <li data-jkit-api-if="data[0]"> <h4 data-jkit-api="data[0].commit.message"></h4> <p> <span data-jkit-api="data[0].commit.committer.date"></span> by <span data-jkit-api="data[0].commit.committer.name"></span> </p> </li> <li data-jkit-api-if="data[1]"> <h4 data-jkit-api="data[1].commit.message"></h4> <p> <span data-jkit-api="data[1].commit.committer.date"></span> by <span data-jkit-api="data[1].commit.committer.name"></span> </p> </li> <li data-jkit-api-if="data[2]"> <h4 data-jkit-api="data[2].commit.message"></h4> <p> <span data-jkit-api="data[2].commit.committer.date"></span> by <span data-jkit-api="data[2].commit.committer.name"></span> </p> </li> <!-- ... cutted out more entries for better readability ... --> </ul> </div> <!-- calling the template with the api command: --> <div data-jkit="[api:format=json;template=commits;url=https://api.github.com/repos/FrediBach/jQuery-jKit/commits]">loading ...</div>
Replacements
There are currently no replacements for this command.
[ Learn more about replacements ]
Discussions
Do you have questions or do you want to suggest new features? Than head over to our new community:
[ jKit Community ]