Google Books API Pagination Example in Javascript – Coding Shiksha

Google Books API Pagination Example in Javascript – Coding Shiksha

Welcome Folks I am back with another post. In this post we will be implementing Google Books API Pagination Example in Javascript. Just Follow the steps given below to make this application.

 

Before you Begin

 

Sign in to Firebase

 

Search By Author

 

 

Search By Title

 

 

 

 

Sort by Publish Date

 

 

 

First of all create index.html file for the webpage that we will see when we launch the app

 

<!DOCTYPE html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Google Books</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<script type='text/javascript' src='config.js'></script>
	<script type="text/javascript" src="script.js"></script>
	<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div class="container">
	<h1>Google Books</h1>
		<div id="searchBox">
			<form id="searchForm" class="form-inline">
				<input type="text" id="searchText">
				<input type="submit" value="Search">
				<select id="typeSearch">
					<option value="-">-</option>
					<option value="Author">Author</option>
					<option value="Title">Title</option>
				</select>
				<select id="orderSearch">
					<option value="Relevance">Relevance</option>
					<option value="Publish Date">Publish Date</option>
				</select>
			</form>
		</div>
	<div id="searchResultsText"></div>
	<div id="searchResults"></div>
	<div id="pagination"></div>
	
</div>
</body>
</html>

 

 

Create a style.css file for styling purposes

 

body{
	font-size: 200%;
}
#searchResultsText{
	margin: 1em 0 1em 0;
	display:block
}
#searchResults{
	margin-top: 1em;
}

.bookPublish{
	border-bottom: thin solid black;
	margin-bottom: 1em;
}
.bookTitleText, .bookAuthorText{
	font-weight: bold;
	margin-bottom: 0.5em;
}
.bookAuthorText{
	margin-top: 0.5em;
}
.bookAuthor{
	margin-bottom: 0.5em;
}
.bookPublishText,.bookPublish{
	font-size: 0.8em;
}
#previous{
	margin-right: 1em;
}

 

Create a script.js file for the business logic of the application

 

$( document ).ready(function() {
	
	//Variables
	var _searchText; //variable to store the text the user inserted in the text box
	var _apiKey = ':keyes&key=' + config.MY_KEY; //variable containing the last parameter of the GET request and the API key
	var _apiURL = "https://www.googleapis.com/books/v1/volumes?q="; //variable containing the URL for the GET request
	var _searchType=""; //variable to define the type of search: author name or title
	var _maxResults = 10; //variable to control the amount of results per page
	var _startIndex = 0; //variable to control the position in the collection of volumes
	var _totalResults = 0; //variable that holds the total number of results fetched with the GET request
	var _orderType =""; //Variable that controls the results order - Relevance or Publish Date
	
	
//function that handles the event after clicking "Search" or pressing ENTER key
$( "#searchForm" ).submit(function( event ) {
	cleanData();
	_searchText = $("#searchForm input:text").val(); //get the text value to be used as a search paramenter
	switch ($("#typeSearch").val()){
		case "Author":
			_searchType = "+inauthor";
			break;
		case "Title":
			_searchType = "+intitle";
			break;
		case "-":
			_searchType ="";
			break;
		default:
			_searchType ="";
	}
	switch ($("#orderSearch").val()){
		case "Relevance":
			_orderType = "";
			break;
		case "Publish Date":
			_orderType = "&orderBy=newest";
			break;
		default:
			_orderType = "";
	}
	//tests if the text box is empty
	if (_searchText ==""){
		//first clean all the things!
		cleanTotalResults();
		cleanBooks();
		cleanPagination();
		cleanData();
		//tell the user no text was found
		$("#searchResults").append("No search text found, please try again");
	}else{//text box is not empty, procceed with search
	requestBooks(_searchText,_startIndex,_maxResults,_searchType,_orderType);}
  event.preventDefault();
}); //Submit event
	
//Function that creates and sends the GET request to google API
//it takes the searched text (_searchText), the staring index (_startIndex), the number of results to display (_maxResults) and the type of search (_sarchType)
function requestBooks(_searchText,_startIndex,_maxResults,_searchType,_orderType){
	//----Sending the GET request----
	var _xhr = new XMLHttpRequest(); //initializing the XMLHttpRequest object
	//defining the request: type GET, URL made up from the variables defined earlier, true means asychronous
	var _url = _apiURL+_searchText+_searchType+_apiKey+"&startIndex="+_startIndex+"&maxResults="+_maxResults+_orderType; //defining the URL to send
	_xhr.open('GET', _url, true);
	_xhr.send(); //sends the request
	//creating an event listener tied to the "readystatechange" that launches the "processRequest" function
 	_xhr.addEventListener("readystatechange", processRequest, false); 
	function processRequest(e) {
		//readystate = 4 means Data is ready to be proccessed
		if (_xhr.readyState == 4 && _xhr.status == 200) {
			var _response = JSON.parse(_xhr.responseText); //transform the response text into a JSON object
			displayTotalResults(_response);
			displayResults(_response);
			createPagination(_response);
		}
	}
	
} //requestBooks

//function to create pagination
function createPagination(_response){
	cleanPagination();
	_totalResults = _response.totalItems;
	//if _startIndex = 0 it means it's the first batch of book data
	//if _totalResults > _maxResults, it means there is more data to be fetched.
	if (_startIndex == 0 && _totalResults>_maxResults){
		_previousIndex = _startIndex;
		_startIndex =_startIndex + _maxResults; 
		$("#pagination").prepend("<a href='#' id='next'>Next</a>");
		//create the function to handle a click to the newly added "NEXT" link
		$("#next").click(function() {
			requestBooks(_searchText,_startIndex,_maxResults,_searchType,_orderType);
			$('html, body').animate({ scrollTop: 0 }, 'slow'); //go to the top of the page, smoothly
			event.preventDefault();
		});
	}else{
		// checks if _startIndex is lower than total results and if the itens to display are the same as the maximum results per page
		if (_startIndex !=0 && _startIndex < _totalResults && _response.items.length == _maxResults){
			cleanPagination();
			$("#pagination").prepend("<a href='#' id='previous'>Previous</a><a href='#' id='next'>Next</a>");
			//create the function to handle a click to the newly added "NEXT" link
			$("#next").click(function() {
				_startIndex =_startIndex + _maxResults;
				requestBooks(_searchText,_startIndex,_maxResults,_searchType,_orderType);
				$('html, body').animate({ scrollTop: 0 }, 'slow'); //go to the top of the page, smoothly
				event.preventDefault();
			});
			//create the function to handle a click to the newly added "PREVIOUS" link
			$("#previous").click(function() {
				_startIndex =_startIndex - _maxResults;
				requestBooks(_searchText,_startIndex,_maxResults,_searchType,_orderType);
				$('html, body').animate({ scrollTop: 0 }, 'slow');
				event.preventDefault();
			});
		//when all the other checks fail it means there are no further Books to get. Only the "Previous" link is shown and _startIndex is set back by _maxResults amount to get the previous Books
		}else{	if(_startIndex !=0){
				cleanPagination();
				//create the function to handle a click to the newly added PREVIOUS link
				$("#pagination").prepend("<a href='#' id='previous'>Previous</a>");
				$("#previous").click(function() {
					_startIndex =_startIndex - _maxResults;
					requestBooks(_searchText,_startIndex,_maxResults,_searchType,_orderType);
					$('html, body').animate({ scrollTop: 0 }, 'slow'); ////go to the top of the page, smoothly
					event.preventDefault();
		});}
			}
	}
}
//function to clean the pagination Div
function cleanPagination(){
	$("#pagination").empty();
}

//function that writes the total number of results found
function displayTotalResults(_response){
	cleanTotalResults();
	
	$("#searchResultsText").prepend("A total of <b>"+ _response.totalItems +"</b> results have been found with the keyword <b>"+ _searchText +"</b>");
}//displayTotalResults

//function that takes the data from the Get Request and displays on the page
function displayResults(_response){
	cleanBooks();
	for (i=0;i<_response.items.length;i++){
				console.log(_response.items[i].volumeInfo.title)
				$("#searchResults").append("<div class ='bookTitleText'>Title</div>");//inserts the text "Title" into the DOM
				$("#searchResults").append("<div class ='bookTitle'>"+_response.items[i].volumeInfo.title+"</div>");//fetches the title from the GET request and inserts in the DOM
				$("#searchResults").append("<div class ='bookAuthorText'>Author</div>");//inserts the text "Author" into the DOM
				$("#searchResults").append("<div class ='bookAuthor'>"+_response.items[i].volumeInfo.authors+"</div>");//fetches the Author from the GET request and inserts in the DOM
				$("#searchResults").append("<div class ='bookPublishText '>Published:</div>");//inserts the text "Published Date" into the DOM
				$("#searchResults").append("<div class ='bookPublish'>"+_response.items[i].volumeInfo.publishedDate+"</div>");//fetches the Puslished Date from the GET request and inserts in the DOM
			}
} //displayResults

//function that cleans the total results text
function cleanTotalResults(){
	$("#searchResultsText").empty();
}

//function that cleans the interface in order to display new Books data
function cleanBooks(){
	$("#searchResults").empty();
}	

//function that cleans the variables for a new search.
function cleanData(){
	_searchText ="";
	_searchType=""; 
	_startIndex = 0;
	_previousIndex = 0;
}

}); //Document ready

 

READ  How to add Custom Fonts in JSPDF | JSPDF Tutorial | Html to Pdf Tutorial

Lastly create a config.js file and include the api key for your project

 

var config = {
    MY_KEY : 'AIzaSyA0Qw2XhngxnR4YmaetQzJtgoBa7z4RJsY',
  }

Leave a Reply

Close Menu