JQuery | Josh Owen

Displaying eBay’s JSON (JSONP) API in a jqGride

December 23, 2009 11:11 am

Ever decide you really hate creating proxy pages to get around cross site ajax? Me too… Good thing JSONP is around! Here is an example I threw together to display eBay items directly from eBay! (You need your own API key, which is free) This doesn’t include paging, I guess that’ll probably be an addition later. Have to check how flexible the jqGrid is…

<script type="text/javascript">
$(document).ready(function(){
	  jQuery("#list").jqGrid({
	    url:'example.php',
	    datatype: 'xml',
	    mtype: 'GET',
	    colNames:['Inv No','Title'],
	    colModel :[ 
	      {name:'ItemID', index:'ItemID', width:100},
	      {name:'Title', index:'Title', width:400}
	    ],
	    pager: '#pager',
	    rowNum:10,
	    rowList:[10,20,30],
	    sortname: 'invid',
	    sortorder: 'desc',
	    viewrecords: true,
	    caption: 'My first grid'
	  }); 
 
	$.ajax({
	   url: "http://open.api.ebay.com/shopping?callname=FindItems&responseencoding=JSON&appid=__YOUR API KEY HERE__&siteid=0&version=517&QueryKeywords=Rutgers&MaxEntries=50&callback=true",
	   dataType: "jsonp",
	   async: false,
	   jsonp: "_cb_FindItems",
	   processData: false,
	 });
 
});
function _cb_FindItems(array)
{
	array = array.Item;
	//Load jqGrid
	for(var i=0;i<array.length;i++){
		jQuery("#list").addRowData(i, array[i]);
	}
}
</script>