Retrieving data from a form search. Using JSON based API URL to retrieve data

Question

I'm building a list of hotels using the Expedia API http://developer.ean.com/docs/hotel-list/ currently I have a json outputted list of hotels from the following URL:

API Sample

I then have a simple foreach loop to display the hotels from the above url:

<--! Form to search for hotels !-->
<form action="">

        <p> Rooms:
        <select name="rooms">
          <option value="value1" selected>1</option> 
          <option value="value2">2</option>
          <option value="value3">3</option>
        </select>
        </p>

        <p>Arrival Date: <input type="text" id="datepicker"></p>

        <p>Departure Date: <input type="text" id="datepicker2"></p>

        <input type="submit" value="Submit">

    </form>

    <?PHP
//use latest minorRev 14
    $url  ='http://api.ean.com/ean-services/rs/hotel/v3/list?minorRev=99';
    $url .= '&apiKey=7z6tduachrht362dpnsch34v';
    $url .= '&cid=55505';
    $url .= '&locale=en_US&city=Dallas&stateProvinceCode=TX&countryCode=US&numberOfResults=3';
    $url .= '&searchRadius=50';
//using the cache returns results much faster
    $url .= '&supplierCacheTolerance=MED_ENHANCED';
//dates and occupancy
    $url .='&arrivalDate=09/04/2014&departureDate=09/05/2014&room1=2';
    $header[] = "Accept: application/json";
    $header[] = "Accept-Encoding: gzip";
    $ch = curl_init();
    curl_setopt( $ch, CURLOPT_HTTPHEADER, $header );
    curl_setopt($ch,CURLOPT_ENCODING , "gzip");
    curl_setopt($ch, CURLOPT_CUSTOMREQUEST, 'GET');
    curl_setopt( $ch, CURLOPT_URL, $url );
    curl_setopt( $ch, CURLOPT_RETURNTRANSFER, true );
    $response = json_decode(curl_exec($ch));
    $response = curl_exec($ch);

    ?>

        <h1>Hotels</h1>

        <?PHP

// Decode the json data

        $data_json = json_decode(file_get_contents($url));  
        $HotelListResponse = $data_json->{"HotelListResponse"};
        $HotelList = $HotelListResponse->{"HotelList"};
        $HotelSummary = $HotelList->{"HotelSummary"};

        print_r($url);

// Loop through the hotels

        foreach ($HotelSummary as $hotel): ?>

        <h2><?php echo $hotel->name; ?></h2>

        <img src="http://images.travelnow.com<?php echo $hotel->thumbNailUrl; ?>" alt="">

        <ul class="hotel-location">
            <li><?php echo $hotel->address1; ?></li>
            <li><?php echo $hotel->city; ?></li>
            <li><?php echo $hotel->stateProvinceCode; ?></li>
            <li><?php echo $hotel->postalCode; ?></li>
            <li><?php echo $hotel->countryCode; ?></li>
        </ul>

        <?php $cleartags = strip_tags($hotel->shortDescription); ?>

        <p><?php strip_tags($cleartags); ?></p>

        <a class href="<?php echo $hotel->deepLink; ?>" alt="">Book Now</a>

        <img src="<?php echo $hotel->tripAdvisorRatingUrl; ?>" alt="">

    <?php endforeach; ?>

The above shows a list of hotels which can be seen at the following url: http://kfdev.co.uk/dev/hotels/

However, I now need to customise the output of the displayed data on the front end. I essentially need a form that can customise the search results. For example, the user should be able to change some parameters of their search, such as room size, arrival and departure date.

I'm wondering how I would get the $url options variables to be inside a form that can be changed on the fly. As you can see the information in the $url variable such as arrivalDate=09/04/2014 and room1=2 effect the output of the json data.

I'm looking for guidance on how to dynamically alter this data in a form where new data can be displayed. Right now I simply just have a static url that the end user can't see any other data apart from what is on the page currently.

Anthony Garcia-Labiad Anthony Garcia-Labiad · Accepted Answer · 2014-02-10T10:57:03

In order to get dynamically data from server while the end user fill the form, you can bind callback on some inputs of your form, for instance onchange, onkeyup or whatever you need, and request your server by ajax request, and display the result accordingly.

There are some pointer, I assume you use jquery :

Edit:

After seeing your form, you can do something like

$("#datepicker").change(function() { 
  var arrival = $(this).val();
  $.getJSON( "data.php", {arrivalDate: arrival})
    .done(function(data) {
      // update your ui here
    }).fail(function(j,t,e) {
      // handle error here
    }); 
});

With data.php, a script that return a json file with data you need for your display, after calling api.ean.com

Retrieving data from a form search. Using JSON based API URL to retrieve data

1 Answers