Monday, February 20, 2012

Consume Json from url using jquery

This is my json structure
__________________________________________________________
{
"Data": [
{ "CurrentDistance": 8,
"Id": "78faf314-3a13-4496-b9d0-73f6737de6c5",
"IsOpen": false,

"Location":

{

"Address": "103 Dominion Road",

"Latitude": -36.871656,

"Longitude": 174.752011

},

"Name": "Champion Bakehouse"

}


], "ErrorMessage": null, "Success": true

}
__________________________________________________________

Here is the html file to consume json using jquery

____________________________________________________________
<!DOCTYPE html>
<html>
<head>
<style>img{ height: 100px; float: left; }</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div id="images">

</div>
<script>
function sn()
{
alert('@ sn() ');
$.getJSON("http://mYweBsite/Location.svc/GetNear?callback=?",


{
//parametres for json
format: 'jsonp',
latitude:-36.871641,
longitude:174.752108,
keyword:'Champion',
onlywithspecials:true
},
function(data) {
alert('heloo @ Function '+data);
$.each(data.Data, function(i,Data){


content = '<br/>Current Distance :' + Data.CurrentDistance + '';
content=content+'<br/> ID : '+Data.Id+'<br/>Address :'+Data.Location.Address;
content=content+'<br/>Name :'+Data.Name+'';
$(content).appendTo("#product_list");
});
});
}</script>

<div id="product_list"></div>
<input type="button" value="call fn " onClick="sn();"/>

</body>
</html>

____________________________________________________________

No comments: