CODEWITHSUNDEEP
jsonapi
user34249
user34249

Reputation: 49

How to use Kimono API

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

Answers (1)

vzamanillo
vzamanillo

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

Related Questions