Introduction
This article describes how to add a Espn Sports News feature in ASP.Net. Here I
will describe how to communicate with the Espn News Headline API to get the news
headline with description and Image.
Description
As it is a Third party API You will have to generate your own API key to use the
API.
In the public portion of the API, only calls to news (headlines) and news
categories are allowed.
The public API key allows only for 1 call per second and 2500 calls per day.
In this link you have to register to get the API key: http://developer.espn.com/overview
API link: http://api.espn.com/v1/sports/news/headlines
Design
Design your screen as in the following screen.
![image1.jpg]()
Or you can copy the following source code:
<body>
<form id="form1" runat="server">
<div>
<asp:Label ID="Label1" runat="server" Text="Espn
Sports News Headlines"ForeColor="Red" Font-Size="X-Large"></asp:Label>
<div id="divnews" style="overflow:
scroll; height:
800px; width:
900px; background-color:
SkyBlue;">
</div>
</div>
</form>
</body>
Next add the following JavaScript code in the head tag (it's used to add News
Result to page).
In that code I am getting the Response as Json :
<head>
<title>Espn</title>
<script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
//
Example JSONP request with jQuery
$.ajax({
url: "http://api.espn.com/v1/sports/news/headlines",
data: {
//
enter your developer api key here
apikey: "your
Api key",
//
the type of data you're expecting back from the api
_accept: "application/json",
//no
of headlines you want to retrive
limit: 30
},
dataType: "jsonp",
success: function (data)
{
//
create an unordered list of headlines
var ul
= $('<ul/>');
$.each(data.headlines, function ()
{
var content
= ' <a
href="' + this.links.web.href
+ '"
>' +this.headline
+ '</a><br/>' + this.description;
$.each(this.images, function ()
{
content
+= '<br/><img
src="' + this.url
+ '"
width="200px" height="200px">';
});
var li
= $('<li/>').html(content);
ul.append(li)
});
//
append this list to the document body
$('#divnews').append(ul);
},
error: function ()
{
//
handle the error
}
});
</script>
</head>
Just check these three lines in the above code:
url: "http://api.espn.com/v1/sports/news/headlines":- This is the Api
link for Get News Headlines.
apikey: "Your API key":- Here you have to pass your API key generated by
Espn.
limit: 30:- No of headlines you want to retrieve
Here I am getting Headlines,Description and related Image from the json
response.
Now build your application.
![image2.jpg]()
Now click on the Headline Link to see detail news.
References
http://developer.espn.com/docs/headlines#what-it-returns
http://developer.espn.com/docs/headlines#code-samples