CODEWITHSUNDEEP
javascriptajaxjsongoogle-apirestful-url
Brian Nezhad
Brian Nezhad

Reputation: 6268

How to retrieve result for Google QPX with Javascript/jQuery (Ajax)?

I have already signed up for Google API Console and set up the account and API key, but my question is how do I retrieve the results from Google QPX. What causes the error below?

Setting up the json Query for Google Request

var FlightRequest = {
  "request": {
    "slice": [
      {
        "origin": "DCA",
        "destination": "LAX",
        "date": "2015-02-11"
      }
    ],
    "passengers": {
      "adultCount": 1,
      "infantInLapCount": 0,
      "infantInSeatCount": 0,
      "childCount": 0,
      "seniorCount": 0
    },
    "solutions": 20,
    "refundable": false
  }
}

Requesting the Data and Returning it.

$.ajax({
 url: "https://www.googleapis.com/qpxExpress/v1/trips/search?key=XXXXXXXXXXXXXXXX", 
 type: 'POST',
 dataType: 'json',
 contentType: 'application/json',
 data: FlightRequest,
 success: function (data) {
  alert(JSON.stringify(data));
},
  error: function(){
   alert("Cannot get data");
 }
});

Error: I have already checked my API Key and is Correct. What can cause this issue?

status of 400 (Bad Request)

Upvotes: 2

Views: 1460

Answers (2)

Sabba Keynejad
Sabba Keynejad

Reputation: 8591

So this is your HTML

<!DOCTYPE html>
<html>
    <head>
        <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
        <script src="test.js"></script>
    </head>
    <body>
            <input type="submit" id="submit" value="Submit">
            <p id="demo"></p>
    </body>
</html>

And now make a new file called test.js and put it in the same directory as the HTML file. Drop the code below in your new test.js file

and finally, add your own API key in the code (where it say your API key)

var sendRequest = function(){
var FlightRequest = {
  "request": {
    "slice": [
      {
        "origin": "LHR",
        "destination": "LAX",
        "date": "2018-9-10"
      }
    ],
    "passengers": {
      "adultCount": 1,
      "infantInLapCount": 0,
      "infantInSeatCount": 0,
      "childCount": 0,
      "seniorCount": 0
    },
    "solutions": 10,
    "refundable": false
  }
};

    $.ajax({
     type: "POST",
     url: "https://www.googleapis.com/qpxExpress/v1/trips/search?key=YOUR_API_KEY", 
     contentType: 'application/json', 
     dataType: 'json',
     data: JSON.stringify(FlightRequest),
     success: function (data) {

      var myJSON = JSON.stringify(data.trips.tripOption[0].pricing[0].saleTotal);

      console.log(myJSON);

      document.getElementById("demo").innerHTML = myJSON;

    },
      error: function(){
       alert("Access to Google QPX Failed.");
     }
    });
}

$(document).ready(function(){
    $("#submit").click(function(){sendRequest();});
});

Now in the code above I am getting 1 price from LHR to LAX if you want to learn how to filter results, check out this link

Upvotes: 0

Brian Nezhad
Brian Nezhad

Reputation: 6268

I have figure out the problem by using Google Chrome POSTMAN App and Using JSON.stringify(); to convert Google json send request (Object) into string for $.ajax(); here is a steps to solve this problem with jQuery.

Start by creating a Variable for your Google json request: We will use this with Ajax to retrieve the data.

var FlightRequest = {
      "request": {
        "slice": [
          {
            "origin": "DCA",
            "destination": "LAX",
            "date": "2015-02-11"
          }
        ],
        "passengers": {
          "adultCount": 1,
          "infantInLapCount": 0,
          "infantInSeatCount": 0,
          "childCount": 0,
          "seniorCount": 0
        },
        "solutions": 20,
        "refundable": false
      }
    };

Use jQuery $.ajax(); to send Access Key, content-type and data requesting

$.ajax({
     type: "POST",
     //Set up your request URL and API Key.
     url: "https://www.googleapis.com/qpxExpress/v1/trips/search?key=YOUR-API-KEY", 
     contentType: 'application/json', // Set Content-type: application/json
     dataType: 'json',
     // The query we want from Google QPX, This will be the variable we created in the beginning
     data: JSON.stringify(FlightRequest),
     success: function (data) {
      //Once we get the result you can either send it to console or use it anywhere you like.
      console.log(JSON.stringify(data));
    },
      error: function(){
       //Error Handling for our request
       alert("Access to Google QPX Failed.");
     }
    });

Upvotes: 2

Related Questions