Socrata Example

by gricha2380

HTML

<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
<script src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
<title>Socrata Example</title>

<body>
    <div id="container">
       <h1>Data from Socrata</h1>
       <table id="example">
          <thead>
            <tr>
		<th>Contact</th>
		<th>City</th>
		<th>County</th>
	    </tr>
	   </thead>
           <tbody>
	   </tbody>
	</table>
   </div>    
</body>

JavaScript

// Forked and tweaked to demonstrate Socrata's CORS support: http://en.wikipedia.org/wiki/Cross-Origin_Resource_Sharing

// Author: Ed Donohue
// Purpose:
// This is a very simple example of how to use client side technology to interact with the Socrata SODA API.
// In this example I am using jQuery and the jQuery plugin dataTables.
// There are a lot more capabilities in terms of filtering, etc but this little diddy should help get you started.
// I encourage all developers to keep data.ny.gov in mind as a very useful datastore for storing and using public 
// viewable data rather than stuffing it in out of reach data bases. 
// For more information about Socrata SODA go here: http://dev.socrata.com/consumers/getting-started
// Also keep in mind this approach is not limited to ny.data.gov and can be used for any instance of Socrata 
// like data.gov

// Tell datatable what HTML table we want to use
$('#example').dataTable();			

// Construct a SODA query string - I'm using the farmers market data for my experiment
url = 'http://data.ny.gov/resource/farmersmarkets.json?$limit=30';

// Use jQuery Ajax Awesomeness to acquire data from data.ny.gov (Socrata)
$.getJSON(url, function(data, textstatus) {
      // Loop over result set
      $.each(data, function(i, column) {
         // for each json record, add a row to the HTML table
         $('#example').dataTable().fnAddData( [
	       column.contact ,
	       column.city,
	       column.county ]
         );
      }); // end $.each
}); // end $.getJSON