Explore 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.