JavaScript / jQuery Calling Rest Api Example

Calling REST API from JavaScript/jQuery. Through this tutorial, i am going to show you how to call rest APIs using javaScript/jquery on your web applications or web pages.

In this tutorial, i will call google news apis using jQuery/javascript. So, Click on the link given below. https://newsapi.org/docs/get-started and get api key of google news api.

Calling RESTful Web Service/Apis From JavaScript / jQuery

• Get Google News Api Key
• Create a js File
• Create the HTML web Page
• Calling REST API from JavaScript/jQuery

Get Google News Api Key

Now, click on the link given below. https://newsapi.org/docs/get-started and get api key of google news api.

This guide walks you through writing a simple javascript/jquery to calling rest web service.

Google News Apis key:

e03753c9126b408d870a44318813ac3d

This the google news web services (Apis)

https://newsapi.org/v2/top-headlines?country=us&apiKey=e03753c9126b408d870a44318813ac3d

When you call Google News API and web service with the help of javascript and jquery then will get the JSON response given below.

[
{
"status": "ok",
"totalResults": 38,
"articles": [
	{
	"source": {
	"id": null,
	"name": "Youtube.com"
	},
	"author": null,
	"title": "Coronavirus: Death toll rises to 81 as China extends holiday  BBC News  BBC News",
	"description": "The number of people killed in China by the new coronavirus has risen to 81, with almost 3,000 confirmed ill. The national new year holiday has been extended...",
	"url": "https://www.youtube.com/watch?v=S2VoEvDEuxw",
	"urlToImage": "https://i.ytimg.com/vi/S2VoEvDEuxw/maxresdefault.jpg",
	"publishedAt": "20200127T10:35:49Z",
	"content": "The number of people killed in China by the new coronavirus has risen to 81, with almost 3,000 confirmed ill.
	The national new year holiday has been extended by three days to Sunday, in an attempt to contain the spread.
	On Monday, Chinese Premier Li Keqiang… [+268 chars]"
	},
	{
	"source": {
	"id": "thewashingtonpost",
	"name": "The Washington Post"
	},
	"author": "Gerry Shih, Simon Denyer",
	"title": "Worries grow that quarantine in China not enough to stem increasingly virulent coronavirus  The Washington Post",
	"description": "Even as the quarantine was being laid down, some 5 million people left Wuhan, the virus epicenter.",
	"url": "https://www.washingtonpost.com/world/coronaviruschinalatestupdates/2020/01/27/3634db9a40a711eaaa6a083d01b3ed18_story.html",
	"urlToImage": "https://www.washingtonpost.com/resizer/AaxiGLihZ1dJXlirb6FyJqaARSY=/1440x0/smart/arcanglerfishwashpostprodwashpost.s3.amazonaws.com/public/4O4ONFSA4YI6VKTKBA6QDM7NDA.jpg",
	"publishedAt": "20200127T10:21:00Z",
	"content": "Chinas health minister said the coronavirus is increasing in virulence and now could be contagious even before people exhibit symptoms making perfectly healthyseeming people possible carriers.
	 A scientific assessment of the disease spread assuming an optim… [+10160 chars]"
	}
   ]
  }
]

Create a js File

Create the js file and in this file call the web service (apis) :

public/my-news.js

$(document).ready(function() {
    $.ajax({
        url: "https://newsapi.org/v2/top-headlines?country=us&apiKey=e03753c9126b408d870a44318813ac3d"
    }).then(function(data) {
       
        for (i = 0; i < data.articles.length; i++) {
		  $('#news').append("<ul><li>"+data.articles[i].title+"</li></ul>");
		}
       
    });
});

This controller module is represented as a simple JavaScript function. It uses jQuery’s $.ajax() method to consume the REST service at https://newsapi.org/v2/top-headlines?country=us&apiKey=e03753c9126b408d870a44318813ac3d. If successful, it will assign the JSON received to data, effectively making it a Greeting model object. The id and content are then appended to the news id and DOM elements respectively.

Note the use of the jQuery promise .then(). This directs jQuery to execute the anonymous function when the $.ajax() method completes, passing the data result from the completed AJAX request.

Create the HTML web Page

Create the HTML page that will load the google news into the user’s web browser:

<!DOCTYPE html>
<html>
    <head>
        <title>Google News Apis</title>
        <script src="https://code.jquery.com/jquery-3.4.1.js"></script>  
        <script src="my-news.js"></script>
    </head>
    <body>
        <div id="news"> </div>
    </body>
</html>

We need to add two jQuery /JavaScript libraries inside the head tag on html web page. The former gives jQuery. He: We have created another in which we will call Web Services / Interconnect.

<script src="https://code.jquery.com/jquery-3.4.1.js"></script>  
<script src="my-news.js"></script>

We have created a div in an html web page. When calling Google’s free news API / web service, the format that will get the response, we will read in this div. Of the jquery append method ():

Calling REST API from JavaScript/jQuery

Open your browser and simply hit the following url into your browser:

 file:///C:/Users/Desktop/public/index.html

Recommended jQuery Tutorials