Calling Rest API from JavaScript / jQuery

How to call rest APIs in javascript/jquery. In this tutorial, you will learn how to call rest APIs in javascript/jquery on your web applications or web pages.

If you are looking for how to consume restful web services in javascript, call rest service from HTML page, jquery rest API post, ajax API, call example, jquery API call, calling web API from jquery ajax, javascript/jQuery call rest API JSON. This tutorial solves your all queries related to calling APIs (web services).

This web services (Apis) tutorial will call Google’s free news web service (API). This will make it easier for you to learn how to call web service and API in JavaScript and Jquery using Ajax.

You might not know that Google provides free (web services) APIs for news. You can get the Google News API key by clicking on the link given below. https://newsapi.org/docs/get-started

Calling Google News RESTful Web Service with JavaScript / jQuery

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 we call Google News API and web service with the help of javascript and jquery then we 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

First, you will 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 or call the REST service/apis 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 Web Page

Now that you have a js, you will create the HTML page that will load the google news into the user’s web browser:

public/index.html

<!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 ():

Call the API

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

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

Recommended Tutorial

1. How to Get the Current Page URL in jQuery
2. jQuery Ajax Get() Method Example
3. get radio button checked value jquery by id, name, class
4. jQuery Set & Get innerWidth & innerHeight Of Html Elements
5. jQuery Get Data Text, Id, Attribute Value By Example
6. Set data attribute value jquery
7. select multiple class in jquery
8. How to Remove Attribute Of Html Elements In jQuery
9. How to Checked Unchecked Checkbox Using jQuery
10. jQuery removeClass & addClass On Button Click By E.g.
11. jQuery Get Multiple Checkbox value to Comma (,) String