jQuery XML to JSON Pluginを使って、要素を作る

JavaScript

今度は対象が教室で200ぐらいある。同じようなことばかり書かなくてはならないのが面倒だ。
名前とか設備とか注意事項とか。

要件

  • 対象が200件
  • HTMLを200件も作りたくない
  • DBが使えないから、XMLで何とかしたい
  • XMLで一覧表示するネタは見飽きた。任意の1件だけ表示したい

そんなこんなで、
http://h2ham.seesaa.net/article/115310088.html
というのを見つけるが「任意の1件だけ」が出来なくて困っていた。

コレ行けるんじゃね？

jQueryで何かやろうと思っても、「」とか「」とかの要素は簡単に取得できることが分かったけど、「」みたいなパラメータの取得方法が分からなかったり、「1」ってな感じの子要素の判定方法が分からなかったりで苦しんだ。
そこで見つけたのが、「jQuery XML to JSON Plugin」
http://f32.aaa.livedoor.jp/~azusa/?t=ajax&p=jquery_plugin_xml#a_xml_to_json
行けそうだ。

試す

sample.xml

本当は「」って書きたいけど、うまくいかなかったから「」を作る。

<?xml version="1.0" encoding="UTF-8" ?>
<list_database>
<row>
	<rowid>0</rowid>
	<build>1</build>
	<floor>地下１</floor>
	<name>b1-1</name>
	<title>hoge</title>
</row>
<row>
	<rowid>1</rowid>
	<build>2</build>
	<floor>3</floor>
	<name>3-1</name>
	<title>fuga</title>
</row>
</list_database>
index.htm

呼び出し側のHTMLにパラメータを仕込む。

<h2>test</h2>
<p><a href="test.htm?id=1">test id1</a></p>
<p><a href="test.htm?id=2">test id2</a></p>
text.htm

呼び出される側のHTMLに仕込みをイロイロと行う。
　
jqueryはここから貰う。
http://www.fyneworks.com/jquery/xml-to-json/#tab-Download
　
headの中

<head>
<script type="text/javascript" src="xml2json/jquery.js"></script> 
<script type="text/javascript" src="xml2json/jquery.xml2json.js"></script> 

<script type="text/javascript"> 
var params = location.href.split("?")[1];
params = params.split("&");
var ValId = "null";
for(var i = 0; i < params.length; i++) {
  var tmp = params[i].split("=");
	if(tmp[0] = "id"){
		ValId = tmp[1];
	}
}

$(function(){
	$.get('sample.xml', function(xml){ 
    	$("#myfeed").append("<h2>新着情報</h2>");
        	var json = $.xml2json(xml);
            var length=json.row.length;
            for(var i=0; i<length; i++){
            	if(json.row[i].rowid==ValId){
            		var $rowid=json.row[i].rowid;
                	var $build=json.row[i].build;
                	var $floor=json.row[i].floor;
                	var $name=json.row[i].name;
                	var s="";
                	s+="<p>"+$rowid+" "+$build+" "+$floor+" "+$name+"<p>";
		　　　　$("#myfeed").append($(s));
		}
	　　}
	});
});
</script> 
</head>

ちゃんとしたエラー処理は毎度の事ながらやっていない。
　
bodyの中

<div id="myfeed"></div>

気になるのは、200件もデータがある場合のスピードかな・・・