JqueryでのJSONデータの操作

このQ&Aのポイント
  • JqueryでJSONデータを操作する方法について紹介します。
  • Jqueryを使ってセレクトメニューの値に応じてJSONデータからデータを取得する方法について解説します。
  • Jqueryを利用してJSONデータから指定のデータを取り出す際に問題が発生する場合の対処法について説明します。
回答を見る
  • ベストアンサー

JqueryでのJSONデータの操作

Jqueryを使い始めたばかりなのですが、JSONデータの操作で行き詰ってしまいました。 例えば下記のようにデータがあったとします。 var prefData= { "長野県":[ {"市区名":"松本市", "町名":["会田","赤怒田","梓川倭"]}, {"市区名":"安曇野市", "町名":["明科中川手","明科光"]} ], "滋賀県":[ {"市区名":"大津市", "町名":["青山","赤尾町","秋葉台"]}, {"市区名":"近江八幡市", "町名":["間之町","赤尾町","浅小井町"]} ] } セレクトメニューにて県を切り替えて、選択したvalueの値を元にデータを引っ張り出したいのですが・・ Jqueryを利用して下記のようにしてみました。(一部抜粋) //HTML <select id="select1"> <option value="長野県">長野県</option> <option value="滋賀県">滋賀県</option> </select> //Javascript var evalData = eval(prefData); $("#category1").change( function(){ selectPref($("#select1").val());} ); function selectPref(val){ //ここで受け取ったvalを元に、市以下のデータを取り出したい //そもそも↓こんな取り出し方は出来ない?? $.each(evalData.val, function(i, value) { alert(value.市区名); }); } 上記のようにするとevalData .val の箇所で「G is undefined」という意味の分からないエラーになります。 ちなみに evalData.val の箇所を evalData.長野県 などと指定するとちゃんとデータは取得できますのでデータの構造には問題ないと思います。 この場合、関数で受け取った変数を元にしてどのように指定すればデータが取れるのでしょうか。

質問者が選んだベストアンサー

  • ベストアンサー
  • yuuki0229
  • ベストアンサー率70% (33/47)
回答No.1

evalData.val は evalData[val] ではないでしょうか

begin96
質問者

お礼

ありがとうございます!それでいけました。 すごく単純なことだったんです・・。 オブジェクトだからずっと .(ドット)でしか操作できないと勘違いしていました。 おかげで助かりました。

関連するQ&A

  • フォームからjQuery,jQuery.jsonを使ってJSONを作っ

    フォームからjQuery,jQuery.jsonを使ってJSONを作ってPHPで表示したい。 こんばんは。2、3日ずっと悩んでて解決しないので助けてください。 jQuery,jQuery.jsonを使ってJSONを作成しています。 クリックイベントに var form = $("#sform"); var json = $(form.serializeArray()); var strJson = $.toJSON(json); という形をとって $.ajax({ url : "request.php", type : "post", data : strJson, success: function(request){ $('#result').html(request); } }); で送っています。 ただPHP側で var_dump($_POST); を行ってもArray ( ) と表示されます。 firebugで見たところpostに入っているデータは以下の通りです。 {"0":{"name":"date","value":"2010/09/15"},"1":{"name":"type","value":"new"},"2":{"name":"bin[]","value":"2"},"3":{"name":"bin[]","value":"3"},"length":4} var_dumpで表示できないのはなぜでしょうか? 上記で変数json のまま送るとオブジェクトとして送れてvar_dump でも表示できます。 ただ今はjson の勉強をしているので、できればなぜこうなっているのかを理解したいです。 基本的なところで勉強不足かもしれませんが、何かアドバイスなど頂けると嬉しいです。 よろしくお願いします。

  • jQuery、JSONの結合方法

    いつもお世話になります。 jQuery.fn.hoge = function(options) { var defaults = { 'val1':'1', 'val2':'2', 'Css':{ 'padding':'3px', 'margin':'2px', 'background-color':'red' } } などとして、 hoge( 'val2':'222', Css':{ 'padding':'10px' } ) var setting = $.extend(defaults,options); とすると、 settingが 'val1':'1', 'val2':'222', Css':{ 'padding':'10px' } となります。 ここで、 settingが 'val1':'1', 'val2':'222', Css':{ 'padding':'10px', 'margin':'2px', 'background-color':'red' } となるようにするにはどうしたらよいのでしょうか。 つまり、 'val2':'2', -> 'val2':'222', 'padding':'3px' -> 'padding':'10px'  と書き換えられるのは良いのですが、, Css':{ 'padding':'10px' } となってしまい 次の2つが削除されてしまうのは困るということです。 'margin':'2px', 'background-color':'red' よろしくお願いいたします。

  • jqueryでselect要素を表示・非表示する方

    下記のように、select要素を2つ用意し、果物か魚を撰択すると、それに応じた2番目のselect要素が表示されるようなコードを作りました。 見た目の問題はないのですが、1つ目で魚を撰択し、あじやさんまを撰択しても、最終的にフォームが送信される時には 果物のvalueが参照されてしまいます。 jqueryのhiddenで隠しているだけなので、果物用のselect要素が裏に潜んでいるためにこういった結果になっているかと思うのですが この問題を解決するためにはどうしたらよいのでしょうか。 <form id="test"> <select id="type"> <option value="fruit">果物</option> <option value="fish">魚</option> </select> <select name="sample" id="fruit"> <option value="apple">りんご</option> <option value="orange">おれんじ</option> </select> <select name="sample" id="fish"> <option value="aji">あじ</option> <option value="sanma">さんま</option> </select> <input type="submit" > </form> // はじめは全て隠しておく $('#fruit').hide(); $('#fish').hide(); $('#type').change(function(){ var type = $(this).val(); if (type == 'fruit') { $('#fruit').show(); $('#fish').hide(); } else { $('#fruit').hide(); $('#fish').show(); } }); $('form').submit(function(){ var result = $('form [name=sample]').val(); alert(result); return false; });

  • 初心者ですTT jQueryを使ったカレンダーのことについて教えて下さい。

    jQueryを使ったカレンダーを途中まで作ることができましたが、 なかなか思うように完成させることができませんでしたTT 作りたいと思っているのは、年がテキストボックスで、 月と日がセレクトで入力するようなものにしたいと思っています。 年月日をそれぞれ入力して、「表示ボタン」をクリックすると、 カレンダーが表示されるところまで作ることはできましたが、 表示されたカレンダーの日付をクリックした時に、年のテキストボックスへ 年が入り、月と日のセレクトに反映されるというようにしたいんですが、 思うように作ることができませんでした。 どなたか教えていただけませんでしょうか・・・。 よろしくお願いします! ↓以下ソースです。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>カレンダーテスト</title> <!--カレンダー用jQuery--> <script type="text/javascript" src="jquery-1.2.6.min.js"></script> <script type="text/javascript" src="ui.datepicker.js"></script> <script type="text/javascript" src="ui.datepicker-ja.js"></script> <link rel="stylesheet" href="jquery/themes/flora/flora.all.css" type="text/css" media="screen"> <script type="text/javascript"> window.onload = function () { $('#ex1').datepicker({ beforeShow:function(tag) { var y=parseInt($('#year').val()); var m=parseInt($('#month').val()); var d=parseInt($('#dayofmonth').val()); var dt=new Date(y,m-1,d); if(!isNaN(dt)) return{ defaultDate:dt}; } }); } </script> <!--カレンダー用jQuery--> </head> <body> <table border="0" cellpadding="0" cellspacing="0"> <tr> <td> <!--カレンダーテスト--> <input id="ex1" type="hidden" size="20" value="today" /> <input id="year" type="text" size="4" />年 <select name="month" id="month"> <option value="" ></option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> </select>月 <select name="dayofmonth" id="dayofmonth" > <option value="" ></option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> <option value="13">13</option> <option value="14">14</option> <option value="15">15</option> <option value="16">16</option> <option value="17">17</option> <option value="18">18</option> <option value="19">19</option> <option value="20">20</option> <option value="21">21</option> <option value="22">22</option> <option value="23">23</option> <option value="24">24</option> <option value="25">25</option> <option value="26">26</option> <option value="27">27</option> <option value="28">28</option> <option value="29">29</option> <option value="30">30</option> <option value="31">31</option> </select>日 <button onclick="$('#ex1').datepicker('show');">表示</button> <!--カレンダーテスト--> </td></tr></table> </body> </html>

  • jQuery $.ajax JSON形式のPOST

    jQuery $.ajax JSON形式のPOSTでフォーム内容を送信し、送信先のPHPでメール送信させるプログラムをかいているのですが、どうしても$.ajaxのerrorが呼び出される状況です。errorが呼び出されますが、PHPの方のメール送信はできております。 PHP側の出力がうまくいっていないのではないかと思いますが、原因がわかりません。どなたかご教授いただけないでしょうか?宜しくお願いします。 ---js--- $("#send").click(function(){ var NAME = $('#name').val(); var EMAIL = $('#email').val(); var TITLE = $('#titlel').val(); var COMMENT = $('#comment').val(); $.ajax({ url : "sendmail.php", dataType : "json", data : {name:NAME, email:EMAIL, title:TITLE, comment:COMMENT}, type : "post", success : function(data){ if(data != ''){ alert(data.result); } }, error : function(){ alert("通信に失敗しました。"); } }); }); ---sendmail.php--- if($_SERVER["REQUEST_METHOD"] != "POST"){ header("HTTP/1.0 404 Not Found"); return; }else{ //メール送信処理 (省略) $message = "送信完了メッセージ"; $result = array('result' => $message); echo json_encode($result); }

  • jsonの取得方法について

    選択したラジオボタンによって、プルダウンの中身を変えたいです。 スクリプト書いてみましたが、学校のデータが取得できません。 ファイルは以下のような感じで、同じフォルダにあります。 どのようにすれば正しく動くのでしょうか? ご教示の程よろしくお願いいたします。 ・スクリプト $("input:radio[name='school']").change(function(){ $("#gakkou").empty().append("<option value=''>-選択-</option>"); var school = $(this).val(); $.getJSON("school.json", function(data){ for (var i = 1; i <= school.length; i++) { $('#gakkou').append('<option value="' + i + '">' + data[school[i]]+ '</option>'); } }); }); ・index.html <td id="school"> <input type="radio" value="中学" name="school"/> 中学   <input type="radio" value="高校" name="school" /> 高校   <input type="radio" value="大学" name="school" /> 大学 </td> 学校: <select id="gakkou"> <option value="">-選択-</option> </select> ・school.json {"中学":{"1":"ABC中学校", ~中略~ "100":"XYZ中学校"}, "高校":{"1":"ABC高等学校", ~中略~ "100":"XYZ高等学校"}, "大学":{"1":"ABC大学", ~中略~ "100":"XYZ大学"}}

  • テキスト内容の変化でイベント発生

    下記のようなコードでイベントを発生したいと考えています。 キーボードによる打ち込みではなく、文章をコピー&ペーストすることで 「firstBox2」の表示を消し、「secondBox2」を表示させたいと考えています。 ご教授お願いします。 <input id="target_input" type="text" value="" /> <select id="firstBox2"> <option value="select1">-----</option> <option value="select2">------</option> </select> <select id="secondBox2" style="display:none;"> <option value="select1">午前中</option> <option value="select2">2度目以降の利用</option> </select> <script type="text/javascript"> var timer = null; var input = document.getElementById("target_input"); var prev_val = input.value; input.addEventListener("focus", function(){ window.clearInterval(timer); timer = window.setInterval(function(){ var new_val = input.value; if(prev_val != new_val){ document.getElementById('firstBox2').style.display = "none"; document.getElementById('secondBox2').style.display = ""; }; prev_value = new_value; }, 10); }, false); input.addEventListener("blur", function(){ window.clearInterval(timer); }, false); } </script>

  • 複数classの取得方法

    貴重な場を借りてご質問させていただきます。 <select id="second">  <option value="1" class="c_1 c_2">タイトル</option> </select> $("#second").change(function(){  var $thisVal = $(this).val();  $("#second option").each(function(){ var secondClass = $(this).attr('class'); var secondVal = secondClass + '_' + $thisVal; console.log(secondVal) }); }); jqueryにて上記のclass、c_1とc_2の後にvalueの値をつけたいと思うのですが、 以下のようにしてconsoleで確認するとc_1 c_2_1となってしまい、 片方にしかつかないのですが、どちらともつくようにする方法がございましたら、 是非とも教えていただければと思います。 どうかよろしくお願いいたします。

  • jquery での <select multiple="true" > について

    jquery (ver1.2.6) で、<select multiple="true"> 内の option を、 全て selected 状態にする方法がわかりません。 単純な <select> タグであれば、 $("select").val("hogehoge"); のように、value にセットすれば選択状態になるみたいなのですが、 multiple の場合はどのように行うのでしょうか。 試しに記述してみたソースは以下のようなものなのですが、 動作いたしません、、 $('#selecttest').each(function() { $(this).attr('selected', 'selected'); }); もしよろしければ、コードまたは参考URLを教えていただけないでしょうか。 よろしくお願いいたします。

  • jQueryでDOM生成後に値を取るとNULL

    下記のような内容でjQueryを使ってDOMの中身を生成後、その値をjQueryで取ろうとしてもNULLになります。 <-- htmlの本体 --> <select id="user"> </select> <-- ページ読み込み時 --> $(document).ready(function () { ↓ ajaxをつかってサーバーのPHPがDOMの中身を生成し、呼び出し元に戻す ↓ <select id="user"> <option value="1">山田さん</option> <option value="2">鈴木さん</option> </select> ↓ DOMの中身が追加された直後に、 user_id = $("#user").val(); としても、値がNULLとなります。 これは、ajaxでDOMの中身を生成して挿入しても、html本体にあるのは中身のない<select id="user">となっているから、NULLが返ってくるという理解でいいのでしょうか? <select id="user">を変更したときに、値を取得するという関数を作ると、正しい値が取得されます。 希望しているのは、ページ読み込み時にDBから値を取ってきてリストボックスを生成し、生成されたリストボックスの一番上の値を使って、別のDOMをさらに生成する、と言うのを自動で行いたいのですが、これは無理なのでしょうか?

専門家に質問してみよう