Reputation: 49
Goal: Parse JSON API data with jquery so I can display the information on my static (no backend) website in a styled list.
I have created an API using Kimono, and now need to display this information. Any help on just where to get started would be great.
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
function kimonoCallback(data) {
// do something with the data
}
$.ajax({
"url":"http://www.kimonolabs.com/api/42ts6px8?apikey=363e7e1d3fffb45d424ad535ebdc233d&callback=kimonoCallback",
"crossDomain":true,
"dataType":"jsonp"
});
</script>
Example JSON Data:
{
"name": "HN",
"count": 30,
"frequency": "daily",
"version": 1,
"newdata": true,
"lastrunstatus": "success",
"lastsuccess": "Wed Mar 19 2014 23:23:40 GMT+0000 (UTC)",
"nextrun": "Thu Mar 20 2014 23:23:40 GMT+0000 (UTC)",
"results": {
"collection1": [
{
"property1": {
"href": "http://blog.samaltman.com/new-rfs-breakthrough-technologies",
"text": "New RFS – Breakthrough Technologies"
},
"source": "(samaltman.com)"
},
{
"property1": {
"href": "https://www.unrealengine.com/blog/welcome-to-unreal-engine-4",
"text": "Welcome to Unreal Engine 4"
},
"source": "(unrealengine.com)"
},
{
"property1": {
"href": "https://www.crypto101.io/",
"text": "Crypto 101"
},
"source": "(crypto101.io)"
},
{
"property1": {
"href": "http://sivers.org/full",
"text": "What if you didn't need money or attention?"
},
"source": "(sivers.org)"
}
Thank you for any help.
Upvotes: 2
Views: 1900
Reputation: 10554
You do not need parse the JSON, when you specify dataType:'jsonp'
property in $.ajax()
, jQuery will automatically parse the response from the server and pass the parsed JSON object to your success callback kimonoCallback(data)
, you need parse the JSON if you remove the dataType:"jsonp"
from your $.ajax()
call only (with JSON.parse(), jQuery.parseJSON()... etc).
<script>
function kimonoCallback(data) {
console.log(data);
$.each(data.results, function( index, collection ) {
$.each(collection, function( index, object ) {
console.log(object.source);
console.log(object.property1.text);
//console.log(object.anotherproperty);
//.....
});
});
}
$.ajax({
"url":"http://www.kimonolabs.com/api/42ts6px8?apikey=363e7e1d3fffb45d424ad535ebdc233d&callback=kimonoCallback",
"crossDomain":true,
"dataType":"jsonp"
});
</script>
Upvotes: 3