メーカー別に件数を表示する

 カーセンサーラボから取得できるXMLデータ内にはメーカー別の台数情報も含まれています。ここでは、指定したキーワードで検索した結果をメーカー別で表示させてみます。
 中古車を検索するには以下のURLにアクセスします。これはこれまでと同様のアドレスです。

http://www.carsensorlab.net/webapi/V1/usedCarSearch/

 この時に「青」や「赤」などのキーワードを指定すると、該当する中古車の情報を返します。複合条件の場合には半角空白で区切って入力します。
 中古車情報のXMLデータの中に含まれる色別台数はsummary_makerタグ内にあります。このタグの中にあるmakerタグの数が車のメーカーに対応しています。makerタグ内にはvalueとcountタグがあります。valueタグの最初のノードの値がメーカー名になります。countタグの最初のノードの値が、valueタグで示されたメーカーの車の台数を示しています。makerタグの個数だけ繰り返し処理を行えばメーカー別の台数を表示させることができます。(実際のサンプルを実行する

*非常に反応が悪いことがあります。30秒以上何も表示されないことがありますが、表示されない場合120秒くらいは待ってみてください。

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>カーセンサーラボ Ajaxサンプル</title>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript"><!--
function getUsedCar()
{
$("result").innerHTML = "検索中です...";
var query = encodeURIComponent($F("searchWord"));
var reqURL = "http://www.carsensorlab.net/webapi/V1/usedCarSearch/?word=";
new Ajax.Request("getXML.rb?"+reqURL+query, { method: "get", onComplete: displayData });
}
function displayData(httpObj)
{
var xmlObj = httpObj.responseXML;
total = xmlObj.getElementsByTagName("response_total_count");
n = total[0].firstChild.nodeValue;
txt = n+"件の中古車が見つかりました<br><br>";
sumYear = xmlObj.getElementsByTagName("summary_maker");
year = sumYear[0].getElementsByTagName("maker");
for (var i=0; i<year.length; i++)
{
y = year[i].getElementsByTagName("value")[0].firstChild.nodeValue
cnt = year[i].getElementsByTagName("count")[0].firstChild.nodeValue;
txt += y + "の車は"+cnt+"台あります<br>";
}
$("result").innerHTML = txt;
}
// --></script>
</head>
<body>
<h1>カーセンサーラボ Ajaxサンプル (中古車検索:メーカー別)</h1>
<form onsubmit="returen false">
<input type="text" value="青" id="searchWord"><br>
<input type="button" value="中古車検索" onClick="getUsedCar()">
</form>
<div id="result"></div>
</body>
</html>

[目次へ]

(2006.6.10)