楽天トラベル空室検索APIを叩いてレスポンスを処理する(MAに向けて) #JavaScript

前回の記事「MAに向けてTwilioと楽天トラベル空室検索APIを使ってアプリを作りたい」の２回目(http://qiita.com/fumishitan/items/6b9944ed9d4daec6a3a8)
前回の記事ではでは単純に楽天APIを叩くだけでしたが、今度はそれをmonacaというサービス上で同様に叩いて、その上でプレビュー画面上にレスポンスの結果を表示します。

ちなみにmonacaとは、HTML5とJSで書いたコードをそのままスマホアプリに変換できるツールです。

URL:https://ja.monaca.io/

まず、APIを叩いた結果を表示するUIから作成します。こちらはmonacaでもとから提供されているToDo Appを利用して作成します。作成した結果がこちら。。。

index.html

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no">
    <script src="components/loader.js"></script>
    <link rel="stylesheet" href="components/loader.css">
    <link rel="stylesheet" href="css/styles.css">
    <script src="js/cssua.min.js"></script>
    <script src="js/app.js"></script>

</head>
<body>
    <div data-role="page" id="list-page">
        <div data-role="header" data-position="fixed" data-theme="c">
            <h1>Hotelを探そう！</h1>
            <input id="search-button" type="button" value="Search" onclick="rakutenTravelApi()">
        </div>
        <div data-role="content">
            <ul data-role="listview" data-inset="true" id="hotel-list"></ul>
        </div>
    </div>
</body>
</html>

もとにしたものを改造したため若干原型が残っていないですが、、、
Serchというボタンをタップしたら楽天APIを叩いて情報を取得しに行くといったものになります。
これで前回の記事のコードを使えば、表示ができる！と思われるかもしれませんが。。。
実は、APIのレスポンスを受け取って処理をするという部分がないため表示は行えません次に
その処理の仕方を書きたいと思います。

まず、

onreadystatechange
を使い、HTTPリクエストが成功した時にレスポンスを処理するメソッドを動かします。
そのメソッドをprocessResponseと名付け前回のfunction rakutentravelUrl()とあわせて記載します

app.js

var xhr = new XMLHttpRequest();
function rakutenTravelApi(){
var rakutentravelApi = "https://app.rakuten.co.jp/services/api/Travel/VacantHotelSearch/20131024";
    var rakutentravelKey ="**************";
    var RANGE = 3;
    var datumType = 1;
    var checkInDate = new Date();
    var checkOutDate = checkInDate;

    checkOutDate.setDate(checkOutDate.getDate() + 1);
    var queri = rakutentravelApi + "?applicationId=" + rakutentravelKey + "&checkinDate=" + checkInDate.toISOString().substring(0,10) + "&checkoutDate=" + checkOutDate.toISOString().substring(0,10) + "&latitude=" + "35.70749253887843" + "&longitude=" + "139.71373558044434" + "&searchRadius=" + RANGE + "&datumType=" + datumType;
    console.log(queri);
    // XMLHttpRequest オブジェクトを作成
   xhr.open("GET",queri,true);
   xhr.onreadystatechange = processResponse;
   xhr.send();
}

function processResponse() {
    if(xhr.readyState == 4) {
        if(xhr.status == 200 || xhr.status == 201) {
            // リクエストの処理
            var rakutentravel = JSON.parse(xhr.responseText);
             for(var i in rakutentravel.hotels){
                var hotelName = JSON.stringify(rakutentravel.hotels[i].hotel[0].hotelBasicInfo["hotelName"]);
                var hotelInfoUrl = JSON.stringify(rakutentravel.hotels[i].hotel[0].hotelBasicInfo["hotelInformationUrl"]);
                $("#hotel-list").append("<li>" + "<p><h3>" + hotelName + "</h3><h4>" + hotelInfoUrl + "</h4>"); 
                $("#hotel-list").append("<h4>"+ "<input id=" + clickInput + " " + "type=" + "'button'" + "value=" + "'reserve'" +"></h4>");
                $("#hotel-list").append("</p>" );
                $("#hotel-list").append("</li>" );
                $("#hotel-list").listview('refresh');

            }

        } else {
            // エラー処理

        }
    }
}

index.htmlとapp.jsをそれぞれMonacaの所定のフォルダに置き起動すると空室情報の一覧が取得できます。
JSONのparseの仕方などを書きたかったが、夜も遅いのでまた今度です。