Goibibo
TransportationExplore Goibibo's Public API with JavaScript
Goibibo is a popular online travel booking platform that provides various services like hotel bookings, flight tickets, and bus rentals. Goibibo also provides a public API that developers can leverage to build their travel-related applications.
In this tutorial, we will explore Goibibo's public API and show you how to make API requests using JavaScript. We will use AJAX (Asynchronous JavaScript and XML) to send HTTP requests and update the web page in real-time with API data.
Getting Started
To get started, you need an API key. If you don't have one, you can get it from Goibibo's API developer portal at https://developer.goibibo.com/register. Once you have an API key, you're ready to make API requests.
Making API Requests
We will use the jQuery AJAX library to make API requests and handle the response. Here's an example of how to make a request to Goibibo's flights API to get the list of flights from Bangalore to Delhi.
$.ajax({
url: "https://developer.goibibo.com/api/search/",
type: "POST",
data: {
app_id: "your_app_id",
app_key: "your_app_key",
format: "json",
source: "BLR",
destination: "DEL",
dateofdeparture: "20211120",
seatingclass: "E",
adults: "1",
children: "0",
infants: "0",
counter: "100"
},
success: function(data) {
console.log(data);
}
});
Let's break down this code block.
- The
url
parameter is the endpoint of the API we're requesting. - The
type
parameter is the HTTP method to use for the request. In this case, we're using POST. - The
data
parameter is the data we're sending to the server in the request body. - The
success
function is called when the API responds with data.
The data
object contains the parameters that the API expects. In this case, we're requesting flights from Bangalore to Delhi on 20th November 2021 with seating class E.
Handling API Responses
When the Goibibo API responds, it will return a JSON structured response. Here's an example of the JSON response that we'll get from our previous API request:
{
"data": [
{
"origin": "BLR",
"destination": "DEL",
"airline": "6E",
"flightno": "191",
"departdate": "2021-11-20",
"arrivedate": "2021-11-20",
"arrivetime": "21:40:00",
"seatingclass": "E",
"currency": "INR",
"totalfare": 7897,
"adultbasefare": 6600,
"adultsurcharges": 1290,
"adulttax": 1007,
"childfare": 0,
"childbasefare": 0,
"childsurcharges": 0,
"childtax": 0,
"infantfare": 0,
"infantbasefare": 0,
"infantsurcharges": 0,
"infanttax": 0,
"commercials": [
{
"farebasis": "PSAKW",
"faretype": "P",
"index": "0",
"farebreakdown": [
{
"faretype": "Basic",
"amount": 6600
},
{
"faretype": "Surcharge",
"amount": 1290
},
{
"faretype": "Tax",
"amount": 1007
}
]
}
]
}
]
}
We can use the success
function to handle this response and update our webpage. For example, we can create a loop to iterate over all the flights and display them on the webpage.
success: function(response) {
var flights = response.data;
for (var i=0; i<flights.length; i++) {
var flight = flights[i];
var flightInfo = `
<div class="flight">
<h3>${flight.airline} ${flight.flightno}</h3>
<p>${flight.origin} to ${flight.destination}</p>
<ul>
<li>Departure: ${flight.departdate} ${flight.departtime}</li>
<li>Arrival: ${flight.arrivedate} ${flight.arrivetime}</li>
<li>Total fare: ${flight.totalfare} ${flight.currency}</li>
</ul>
</div>
`;
$('#flights').append(flightInfo);
}
}
This code block creates a div
element for each flight and adds it to the #flights
element on the webpage.
Conclusion
You've learned how to make API requests to Goibibo's public API and handle the JSON responses using JavaScript. Now, you can explore the many endpoints available through Goibibo's API developer portal and integrate them into your own travel-related applications.