XMLの値の取得方法について
- XMLの値の取得方法について説明します。
- 車種のIDや価格、燃費の値を取得する方法がうまくいかないようです。
- プルダウンでメーカを選択し、選択された車種の価格と燃費を表示する機能を実装したいと考えています。
- ベストアンサー
xmlの値の取得等について。
(XML) <?xml version="1.0" encoding="UTF-8"?> <価格> <メーカ id="toyota"> <車種 id="wish"> <価格>200万</価格> <燃費>30km</燃費> </車種> <車種 id="sai"> <価格>250万</価格> <燃費>40km</燃費> </車種> </メーカー> <メーカー id="honda"> <車種 id="fit"> <価格>159万円</価格> <燃費>50km</燃費> </車種> <車種 id="crz"> <価格>236.5万円</価格> <燃費>40km</燃費> </車種> </メーカ> </価格> (HTML) <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> </head> <body> <script> userFunc(); function userFunc() { xmlAttr = xmlDocs.getElementsByTagName( 'メーカ' ); if ( xmlAttr[0].hasChildNodes() ) { manufacturerID = xmlAttr[0].getAttributeNode( 'id' ).value; alert( manufacturerID ); } } </script> </body> </html> 参考 XML にあります メーカタグ id は、取得できるのですが、 その 1 階層目(車種)のidの取得方法や、更に 2 階層目の価格と燃費の値を取得方法が、 上手くいきませんでした。 プルダウン等で、メーカを指定して、車種一覧をプルダウンに表示。 その車種をプルダウンより選択すると価格、燃費が表示されるようにしたいと考えています。 どうぞ、みなさま、よろしくお願いいたします。
- yukiling
- お礼率72% (13/18)
- JavaScript
- 回答数4
- ありがとう数0
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
こんにちは。 クロスブラウザまで考えていなかったので私が提示したものはIEで動きませんでした。 一応、IEとFirefoxで動かして、同じ動きになるようにしたソースをフルで提示します。 動作内容はできる限りコメントに書きました。 動作を追いながら、自分で作ったものと比較、どういった処理をしているか見てみてください。 わからないところがあったらまた質問してください。 (突貫で作っておりもっといい作りがあるかもしれませんので参考までにどうぞ） <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>サンプル</title> <script> function loadXML() { var url = './xml.xml?'+(new Date).getTime(); var xmlHttp; try { xhttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch(e) { xhttp = new XMLHttpRequest(); } xhttp.open ( "GET", url, false ); xhttp.send ( null ); return xhttp.responseXML; } // メーカーごとのCar情報を保持するオブジェクト var makers = {}; // メーカープルダウン用の変数 var selMaker; // 車種プルダウン用の変数 var selCar; function loadData() { // メーカープルダウンを取得 selMaker = document.getElementById('sel-maker'); // 車種プルダウンを取得 selCar = document.getElementById('sel-car'); // xmlをロード var xmlDocs = loadXML(); // メーカータグの要素を取得 var xmlAttr = xmlDocs.getElementsByTagName( 'メーカー' ); // メーカータグ分のループ処理 for ( var i = 0; i < xmlAttr.length; i ++ ) { // i番目のidを取得する var maker = xmlAttr[i].getAttributeNode('id').value; // メーカープルダウンのoptionタグを動的に生成 selMaker.options[i+1] = new Option ( maker , maker ); // i番目のメーカータグ内の車種タグを取得する var kind = xmlAttr[i].getElementsByTagName('車種'); // 車種情報の配列を宣言 var cars = new Array(); // 車種タグ分のループ処理 for ( var j = 0; j < kind.length; j ++ ) { // 価格の値を取得 var kakaku = kind[j].getElementsByTagName('価格')[0].firstChild.nodeValue; // 燃費の値を取得 var nenpi = kind[j].getElementsByTagName('燃費')[0].firstChild.nodeValue; // Carオブジェクトを生成 var obj = new Car ( kind[j].getAttributeNode('id').value, kakaku, nenpi ); // Carオブジェクトを配列に追加 cars.push ( obj ); } // メーカー配列にname=idと,メーカーに紐付くCarオブジェクトをcarsとして追加 makers[maker] = { name: maker, cars: cars }; } } /** * ページロード後に実行する処理 */ window.onload = function() { // xmlを解析しデータを生成する loadData(); /** * メーカープルダウンを変更した際に実行する処理 */ selMaker.onchange = function() { // 車種プルダウンをクリア selCar.options.length = 0; // 先頭に”車を選択”を追加 selCar.options[0] = new Option ( '車を選択', '' ); // 変更した際に先頭の”メーカーを選択”を選択した際は // 価格、燃費の表示を”-”とし、処理を中止 if ( this.value === '' ) { setData ( '-', '-' ); return; } // メーカーが選択された場合はidが取得できるのでその文字列を利用して // メーカー配列から情報を取得する var maker1 = makers[this.value]; // 取得した情報の中にcarsという配列があるのでその数分のループ処理 for ( var i = 0; i < maker1.cars.length; i ++ ) { // 先頭には”車を選択”があるので次のindexから（i+1）optionを追加する selCar.options[i+1] = new Option ( maker1.cars[i].name, maker1.cars[i].name ); } }; /** * 車種プルダウンを変更した際に実行する処理 */ selCar.onchange = function() { // 先頭にある”車を選択”が選択された場合は // 価格、燃費の表示を”-”とする if ( this.value === '' ) setData ( '-', '-' ); // メーカー配列から情報を取得する var maker = makers[selMaker.value]; // 取得した情報の中にcarsという配列があるのでその数分のループ処理 for ( var i = 0; i < maker.cars.length; i ++ ) { // ループ処理している間に選択された車種と一致した場合に // 価格、燃費の表示を変更する if ( maker.cars[i].name === this.value ) { setData ( maker.cars[i].kakaku, maker.cars[i].nenpi ); } } } } /** * Carオブジェクト * 車種、価格、燃費を持つ */ function Car ( name, kakaku, nenpi ) { this.name = name; this.kakaku = kakaku; this.nenpi = nenpi; } /** * 価格と燃費の表示を更新する */ function setData ( kakaku, nenpi ) { document.getElementById('txt-kakaku').innerHTML = kakaku; document.getElementById('txt-nenpi').innerHTML = nenpi; } </script> </head> <body> <select id="sel-maker"> <option value="">メーカーを選択</option> </select> <select id="sel-car"> <option value="">車を選択</option> </select> <hr /> <dl> <dt>価格</dt> <dd><span id="txt-kakaku">-</span></dd> <dt>燃費</dt> <dd><span id="txt-nenpi">-</span></dd> </dl> </body> </html>
その他の回答 (3)
- LancerVII
- ベストアンサー率51% (1060/2054)
こんにちは。 >selMaker.options[i+1] = new Option ( maker , maker ); エラーの部分がはプルダウンへ動的にoptionタグを追加しているところです。 (すみません、ソースを載せる際に残っていたようです) >また、具体的なプルダウンへ、あてたコードも見ることもできれば助かるのですが。 #1さんへの補足で >かもしれないのですが、javascriptで実現したいと考えています。 >XSLT は 難しくて...。 とあったのでJavaScriptは出来ると思ったので複雑かな？と思うxmlの解析部分だけ載せました。 var selMaker = document.getElementById('sel-maker'); と定義してHTMLに <select id="sel-maker"></select> を定義すればメーカーのプルダウンが生成されます。 あとはやってみて、わからなかったら再度質問してください。 （メーカーのプルダウンは上記で生成されます。次の車種プルダウンはそれの応用です)
- LancerVII
- ベストアンサー率51% (1060/2054)
こんにちは。 転記ミスかもしれませんが”メーカー”とメーカが混在しておりxmlとしてまずいです。 多分以下のようなxmlだと思いますが如何でしょうか。 makersは以下のような感じで値が入ります。 makers['honda'].cars[0].name; // fit makers['honda'].cars[0].nenpi; // 50km makers['toyota'].cars[1].name; // sai makers['toyota'].cars[1].kakaku; // 40km あとはこのmakersの情報を利用してプルダウンの生成等を行えば良いです。 === xml <?xml version="1.0" encoding="UTF-8"?> <価格> <メーカー id="toyota"> <車種 id="wish"> <価格>200万</価格> <燃費>30km</燃費> </車種> <車種 id="sai"> <価格>250万</価格> <燃費>40km</燃費> </車種> </メーカー> <メーカー id="honda"> <車種 id="fit"> <価格>159万円</価格> <燃費>50km</燃費> </車種> <車種 id="crz"> <価格>236.5万円</価格> <燃費>40km</燃費> </車種> </メーカー> </価格> ==== JavaScript var makers = {}; function setData() { var xmlDocs = loadXML();//xml読み込み var xmlAttr = xmlDocs.getElementsByTagName( 'メーカー' ); // ”メーカー”のタグの数分のループ処理 for ( var i = 0; i < xmlAttr.length; i ++ ) { var maker = xmlAttr[i].getAttributeNode('id').value; // ”メーカー”のidを取得 selMaker.options[i+1] = new Option ( maker , maker ); // i番目の”メーカー”タグ内の車種タグを取得 var kind = xmlAttr[i].getElementsByTagName('車種'); // carオブジェクトの配列を宣言 var cars = new Array(); // ”車種”のタグの数分のループ処理 for ( var j = 0; j < kind.length; j ++ ) { // j番目の”車種”タグの中の”価格”を取得 var kakaku = kind[j].getElementsByTagName('価格')[0].textContent; // j番目の”車種”タグの中の”燃費”を取得 var nenpi = kind[j].getElementsByTagName('燃費')[0].textContent; // carオブジェクトを生成（車種id,価格,燃費) var obj = new Car ( kind[j].getAttributeNode('id').value, kakaku, nenpi ); // 生成したcarオブジェクトを配列に追加 cars.push ( obj ); } // makersにidを利用して配列を生成し、メーカーごとのcarオブジェクトを格納する makers[maker] = { name: maker, cars: cars }; } } // carオブジェクト function Car ( name, kakaku, nenpi ) { this.name = name; this.kakaku = kakaku; this.nenpi = nenpi; }
補足
コードを書いていただきありがとうございます。とてもうれしいいです。 以下のラインが、よくわからなかったのと、この行で script が止まるようです。 selMaker.options[i+1] = new Option ( maker , maker ); また、具体的なプルダウンへ、あてたコードも見ることもできれば助かるのですが。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
XSLTを使うほうが早いのでは？？
補足
かもしれないのですが、javascriptで実現したいと考えています。 XSLT は 難しくて...。
関連するQ&A
- VbscriptでXMLの値取得ができません。。
javascriptでXMLを組み立て、vbScriptで中身を取得しようとしていますが、 中身を取ることができません。 考えられる原因がありましたら教えていただけますでしょうか。 XML--------- <xml> <data> <xml> <Head> <cd_kaisha>1</cd_kaisha> <cd_jigyosho>1</cd_jigyosho> <cd_shain>1234</cd_shain> <cd_tenmei></cd_tenmei> <lit_memo></lit_memo> </Head> <Line> <cd_buhin>14921</cd_buhin> <su_hat></su_hat> </Line> </xml> </data> </xml> vbScript------------- Set xmlReceive = Server.CreateObject("Microsoft.XMLDOM") xmlReceive.Load(Request) ' ヘッダー部項目を取得 Set xmlHead = xmlReceive.selectSingleNode("//Head") '(1) Set xmlHeadChild = xmlHead.selectSingleNode("//cd_kaisha") '(2) Set strCdKaisha = xmlHeadChild.NodeValue '(3) (1)では次のように取得されています。 <Head> <cd_kaisha>1</cd_kaisha> <cd_jigyosho>1</cd_jigyosho> <cd_shain>1234</cd_shain> <cd_tenmei></cd_tenmei> <lit_memo></lit_memo> </Head> (2)も次のように取得されています。 <cd_kaisha>1</cd_kaisha> (3)が取得されません。空文字が取れているようです。 xmlHeadChild.hasChildNodes xmlHeadChild.firstChild.NodeType xmlHead.item(0).text xmlHeadChild .text も空になってしまい、取れませんでした。
- 締切済み
- XML
- AjaxでXMLの要素が取得できない
いつもお世話になっております。 Ajaxを勉強しているのですが、prototype.jsを使用し、XMLを読み込んで データを表示させることができず困っております。 ソースは以下の通りです。 logdate.xml <?xml version="1.0" encoding="UTF-8"?> <namelists> <namelist> <name>山田</name> <ten>50</ten> </namelist> <namelist> <name>鈴木</name> <ten>48</ten> </namelist> </namelists> hoge.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Solutoire.com Plotr › LineChart Example</title> <link type="text/css" rel="stylesheet" href="style.css" /> <script src="./lib/prototype/prototype.js" type="text/javascript"></script> <script type="text/javascript"><!-- function getFile() { new Ajax.Request("logdate.xml", { method: "get", onComplete: displayData }); } function displayData(httpObj) { var XML = httpObj.responseXML; var itemsTag = XML.getElementsByTagName("namelists"); $("result").innerHTML = itemsTag.length; } // --></script> </head> <body> <a HREF="logdate.xml">a</a> <form> <input type="button" value="読み込み" onClick="getFile()"> </form> <div id="result"></div> </body> </html> 結果は0となってしまいます。 ネットで調べたりしましたが、原因がつかめません。 どのようにしたらよいのでしょうか？どなたか教えてください。 宜しくお願い致します。
- ベストアンサー
- JavaScript
- JavaScriptでプルダウンのサイズを取得
JavaScriptにてプルダウンのサイズ(<option>の数)を取得したいと思っています。 document.getElementById("pulldown").length にて取得できると思うのですが 試してみたところ無反応でした。どう書けばよろしいのでしょうか。 <html> <head> <script type="text/JavaScript"> alert(document.getElementById("pulldown").length); </script> </head> <body> <form name="form"> <select name="pulldown" id="pulldown"> <option value="5">5</option> </select> </form> </body> </html>
- ベストアンサー
- JavaScript
- html内の値を取得
下記開発環境で開発を行っています。 VS2005 vb.net あるString型の変数に値が入っています。 その値は下記のようなhtmlです。 <html> ←ここから <head></head> <body> <div id='test1'> OK </div> </body></html> ←ここまで 実装したいことは <div id='test1'> で囲まれた”ＯＫ”という値を取得することです。 文字列をHtmlDocumentに格納するとGetAttributeメソッドで取得できるのらしいですが、 方法がわかりません。←すみません、表現がただしくないかもしれません。 どなたかご存知の方ご教授お願い致します。
- 締切済み
- Visual Basic
- javascriptのxml読み込みFireFoxにて
htmlで外部javascriptを読み込んでxmlの読み込みをしています。 htmlは <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>無題ドキュメント</title> <script language="JavaScript" src="xmlSearch.js"></script> </head> <body onload="display()"> <div id="poem" align="center"></div> </body> </html> です。 javascriptは function display() { if(document.all){ xml_doc = new ActiveXObject("Microsoft.XMLDOM"); }else{ xml_doc = document.implementation.createDocument("", "", null); } xml_doc .async = false; xml_doc.load("flv.xml"); var root = xml_doc.documentElement; var book = root.childNodes; document.getElementById("poem").innerHTML = book.item(0).text; } xmlは <?xml version="1.0" encoding="UTF-8"?> <video> <pass>flv/video1.flv</pass> </video> です。 しかしこれだとFireFoxでは何も表示されません。 どなたか原因が分かる方いませんか？
- ベストアンサー
- JavaScript
- jQueryでxmlの異なるタグ要素を取得したい。
jQueryを最近勉強したての者です。 詳しい方、どうか教えて下さい。 HTMLにxmlのデータを読み込ませようとしています。 概略をお話しすると、 htmlファイルによって、xmlの別々の要素を取得したいのです。 やりたいメソッドは同じです。 別々の要素の中のデータによって、imgの表示／非表示を切り替えたいのです。 問題は、対象となるhtmlファイルが複数あり そのhtmlファイルによって、参照するxmlのタグが異なる事なんです。 xmlは、以下のように<shopdata>をルートノードとし、以下のような感じです。 --------------------- <?xml version="1.0" encoding="utf-8"?> <shopdata> <item> <name1>0</name1> <name2>1</name2> <name3>0</name3> </item> </shopdata> --------------------- <name*>～</name*> の中のデータは、0もしくは1なのですが 0の時はimgを表示 1の時はimgを非表示させようと考えています。 ただ<name1><name2><name3> とタグ名がバラバラなんです。 ※おしりの数字が違うだけで、規則的ではあります。 ちなみにhtmlは複数あって a.htmlの時は→xmlの<name1>を参照 b.htmlの時は→xmlの<name2>を参照 c.htmlの時は→xmlの<name3>を参照 という感じです。 ※htmlファイル名は特に規則的ではなく、いろいろなファイル名がついています。。。 最初、考えたのは、 htmlのどこかに、id="1"と入れて、idが1の時は、<name1>の要素を取得し、 htmlのどこかに、id="2"と入れて、idが2の時は、<name2>の要素を取得し… っていうことを考えたのですが、それもどのように書いたら良いのかが分からないんです。 そもそも、そういった事は可能なのでしょうか？ ちなみのhtmlのbodyタグ自体がテンプレートでできているので、 idをどこかにふるとしたら、head内とかになるのしょうか？ それぞれ、ボタンの表示は、 if文を使って、show(),hide()メソッドを使うとは思うのですが… 詳しくコードを教えていただけたら、助かります。 どうか、宜しくお願いいたします。
- ベストアンサー
- AJAX
- XMLでノード内にあるIDを取得してそのIDが含まれるノード内の内容を
XMLでノード内にあるIDを取得してそのIDが含まれるノード内の内容を反映させる にはどうしたらいいでしょうか？ XMLは以下のような感じです。 <?xml version="1.0" encoding="UTF-8"?> <top> <menu> <pid>1</pid> //これをIDとして <test>テスト</test> <test2>msn</test2> </menu> <menu> <pid>2</pid> <test>テストにしたのに…</test> <test2>教えてごお</test2> </menu> <menu> <pid>3</pid> <test>テスト</test> <test2>yahoo</test2> </menu> </top> 私はアクションスクリプトでxmlを読み込んでfirstChild やnextSiblingが使える程度のレベルです。 nextSiblingで上から順番にノードを取得していくことはできますが、 ”あるIDを取得してそのIDがある内容（<test>,<test2>）を反映させる” というところでつまずいています。 最悪はIDを取得しなくても ”？番目の<menu>を取得する” という取得の仕方でもいいです。 （<pid>と？番目は同じなので） あるいは ”<menu id="1">の属性を取得して反映させる” という方法の方が簡単ならばXMLの変更も可能な状態です。
- ベストアンサー
- Flash
- NN で XML を使いたい
次のスクリプトを、NN でも動作するようにしたいのですが、 どのようにすればいいのでしょうか。 （場合分けは省略してくださって構いません） head タグ内の script タグ内 nodes = eList.XMLDocument.getElementsByTagName("date"); len = nodes.length; for (i=0; i<len; i++) { dates[i] = nodes[i].text; areas[i] = nodes[i].nextSibling.text; } body タグ内 <xml id="eList" src="exception.xml" /> よろしくお願い致します。
- 締切済み
- JavaScript
- XPathで値を取得して設定する方法
質問です。 <?xml version="1.0" encoding="UTF-8"?> <ABC> <tarou id="pen" value="1" /> </ABC> とABCの太郎のペンは何本あるか？とXMLに記述してある場合、 どのようにコーディングして取得と設定を行うのでしょうか？ System.Xml.Linq等、色々あるみたいですがXMLは触れた事が無いので…。 お優しい方お教え下さい。
- ベストアンサー
- Visual Basic
- form につけた id 値の取得方法
form 内に id という名前の input 要素があると、form につけた id 値が取得できません。firefox で確認しましたが、例の f2.id が input 要素になります。このような場合 form の id 値はどのようにすれば取得できるでしょうか。 <!doctype html> <html> <head><title>id test</title></head> <body> <form id="f1" name="f1"> <input type="hidden" name="idx"> </form> <form id="f2" name="f2"> <input type="hidden" name="id"> </form> <script type="text/javascript"> var f1 = document.getElementById('f1'); var f2 = document.getElementById('f2'); alert("f1.name: " + f1.name + ", f1.id: " + f1.id + "\nf2.name: " + f2.name + ", f2.id: " + f2.id); </script> </body> </html>
- ベストアンサー
- JavaScript
補足
ご返答いただきありがとうございます。頼ってしまいすみません。 XMLは変更せず以下のようにHTMLを記述しました。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> </head> <body> <select id="sel-maker"></select> <script> setData(); function readXML() { if ( window.XMLHttpRequest ) { // code for IE7+, Firefox, Chrome, Opera, Safari. xmlhttp=new XMLHttpRequest(); } else { // code for IE6 bellow. xmlhttp = new ActiveXObject( 'Microsoft.XMLHTTP' ); } xmlhttp.open( 'GET', './test.xml', false ); xmlhttp.send(); xmlDocs = xmlhttp.responseXML; return xmlDocs; } var makers = {}; function setData() { var xmlDocs = readXML(); var xmlAttr = xmlDocs.getElementsByTagName( 'メーカー' ); for ( var i = 0; i < xmlAttr.length; i ++ ) { var maker = xmlAttr[i].getAttributeNode('id').value; var selMaker = document.getElementById('sel-maker'); selMaker.options[i+1] = new Option ( maker , maker ); var kind = xmlAttr[i].getElementsByTagName('車種'); var cars = new Array(); for ( var j = 0; j < kind.length; j ++ ) { var kakaku = kind[j].getElementsByTagName('価格')[0].textContent; var nenpi = kind[j].getElementsByTagName('燃費')[0].textContent; var obj = new Car ( kind[j].getAttributeNode('id').value, kakaku, nenpi ); cars.push ( obj ); } makers[maker] = { name: maker, cars: cars }; } } // carオブジェクト function Car ( name, kakaku, nenpi ) { this.name = name; this.kakaku = kakaku; this.nenpi = nenpi; } </script> </body> </html> loadXML()に関しては、検索等しましたが、使い方がわからず、 readXML()と自作しました。 どうしても、以下の行でスクリプトが止まります。 makers[maker] = { name: maker, cars: cars }; >>（メーカーのプルダウンは上記で生成されます。次の車種プルダウンはそれの応用です) 車種プルダウンも難解で作成できませんでした。