【質問】JSONデータをjQueryでどう処理すれば？

前へ 次へ
このQ&Aのポイント
  • 質問させてください。JSONデータの扱い方に悩んでおります。以下の２つのコードはここでは見にくいため次のサイトに載せておきます。data.jsonのようなJSONデータがあります。この中でそれぞれのfields内のkamoku、kamoku_hira、kamoku_alphaを取得したいと考えています。jQueryにてどのように書けば宜しいのでしょうか? $(function(){ $.getJSON('./data.json', function(data){ $.each(data, function(){ $.each(data.filter, function(){ alert(this.kamoku); }); }); }); });の型で考えたのですが良く分かりませんでした。アドバイス頂けたら幸いです。jQueryは1.11.1です。
  • JSONデータをjQueryで取得し、特定のプロパティを取得したいと考えています。具体的には、data.jsonというファイルに含まれるデータの中のfieldsというプロパティの中のkamoku、kamoku_hira、kamoku_alphaというプロパティを取得したいです。jQueryのバージョンは1.11.1を使用しています。現在、以下のコードを考えているのですが、正しい書き方が分かりません。どのように書けば良いでしょうか？ $(function(){ $.getJSON('./data.json', function(data){ $.each(data, function(){ $.each(data.filter, function(){ alert(this.kamoku); }); }); }); });アドバイスをいただけると幸いです。
  • jQueryを使用してJSONデータを処理する際に困っています。具体的には、data.jsonというファイルに含まれるデータの中のfieldsというプロパティの中のkamoku、kamoku_hira、kamoku_alphaというプロパティを取得したいです。jQueryのバージョンは1.11.1を使用しています。現在、以下のコードを考えているのですが、正しい書き方が分かりません。どのように書けば良いでしょうか？ $(function(){ $.getJSON('./data.json', function(data){ $.each(data, function(){ $.each(data.filter, function(){ alert(this.kamoku); }); }); }); });アドバイスをいただけると助かります。
回答を見る
  • ベストアンサー

このJSONデータをjQueryでどう処理すれば？

質問させてください。 JSONデータの扱い方に悩んでおります。 以下の２つのコードはここでは見にくいため次のサイトに載せておきます。 http://codepad.org/CSN6X94T http://codepad.org/aPiIzcOR data.json [ { "pk": 1, "model": "ac.ni", "fields": { "kamoku_alpha": "SUUGAKU", "kamoku": "数学", "hissu": 0, "kamoku_hira": "すうがく" } }, { "pk": 2, "model": "ac.ni", "fields": { "kamoku_alpha": "EIGO", "kamoku": "英語", "hissu": 0, "kamoku_hira": "えいご" } }, { "pk": 3, "model": "ac.ni", "fields": { "kamoku_alpha": "KOKUGO", "kamoku": "国語", "hissu": 1, "kamoku_hira": "こくご" } } ] のようなJSONデータがあります。 この中でそれぞれのfields内のkamoku、kamoku_hira、kamoku_alphaを取得したいと考えています。 jQueryにてどのように書けば宜しいのでしょうか? $(function()｛ $.getJSON('./data.json', function(data){ $.each(data, function(){ $.each(data.filter, function(){ alert(this.kamoku); }); }); }); }); の型で考えたのですが良く分かりませんでした。 アドバイス頂けたら幸いです。 jQueryは1.11.1です。

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

  • ベストアンサー
回答No.1

$.each(json, function(index) { console.debug(index+'番目'); console.debug(this.fields.kamoku); console.debug(this.fields.kamoku_hira); console.debug(this.fields.kamoku_alpha); }); こうじゃないの？ jsonを対象にeach それは何かというと {"pk":1} この単位のループ pk3まで。 だからその中のfieldsのxxxを取得 単純にこうじゃない？

valilian
質問者

お礼

お答え頂きましてありがとうございました。 結果を確認致しました。 本当にありがとうございました。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連する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 の勉強をしているので、できればなぜこうなっているのかを理解したいです。 基本的なところで勉強不足かもしれませんが、何かアドバイスなど頂けると嬉しいです。 よろしくお願いします。

  • JSONデータをｊQueryにわたす際に文字化け

    MySQLからのデータをPHPでJSON形式に加工して、ｊQueryで表示させようしているのですが、 どうしても日本語だけ文字化けをしてしまい、エンコードを色々変えても文字化けしてしまい困っています。 どなたか助けていただけませんでしょうか？ -文字化け結果- No：1　Title：¤Ç¤­¤¿¡ªÂçÀ®¸ù¡ª No：2　Title：¤³¤ì¤«¤é´èÄ¥¤ë¡ª phpにアクセスしても文字化けはいたしません。 ｊQueryからアクセスをすると完璧に文字化けをしてしまいます。 json.php (UTF-8) [ { no: "1", title: "できた！大成功！" }, { no: "2", title: "これから頑張る！" } ] index.html (UTF-8) <!DOCTYPE HTML> <html> <head> <meta charset="euc"> <title>jsonテスト</title> <link rel="stylesheet" type="text/css" href="style/desktop.css"> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.7.1");</script> <script type="text/javascript"> jQuery(function(){ $.getJSON("./json.php",function(data){ $('p','#demo').remove(); $('#demo').append('<ul/>'); $.each(data,function(i,items){ $("<li/>",{ text:'No：'+items.no+'　Title：'+items.title }).appendTo('ul','#demo'); }); }); }); </script> </head> <body> <div> <div id="demo"> <h4>リスト</h4> <p></p> </div> </div> </body> </html>

  • 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.長野県 などと指定するとちゃんとデータは取得できますのでデータの構造には問題ないと思います。 この場合、関数で受け取った変数を元にしてどのように指定すればデータが取れるのでしょうか。

  • jQueryの$.getJSONでデータを渡したい

    jQueryの$.getJSONでデータを渡したいのですが、 うまくいきません。 test.js { 　"users": [ 　　{ 　　　"name": "aoki", 　　　"code": "0001" 　　}, 　　{ 　　　"name": "ueno", 　　　"code": "0002" 　　} 　] } 読み込む側 $.getJSON("test.js", { "name": "John", "code": "0003" }, function(json){ 　alert("JSON Data: " + json.users[0].name); 　alert("JSON Data: " + json.users[1].name); 　alert("JSON Data: " + json.users[2].name); }); { "name": "John", "code": "0003" }を渡しているのだから、 json.users[2].nameで、"John"が取得できると思ったのですが、 「'users.2.name' は Null またはオブジェクトではありません。」エラーになります

  • javascriptでJSONを取得する方法

    C#、asp.netでJson形式の文字列をjavascriptに渡してgooglemapで使用したいです。 json.netやらDynamicJson やらがインストールされていないと使用できないのでしょうか。 aspx.cs dynamic dataSet = 取得したlist; System.Web.Script.Serialization.JavaScriptSerializer serializer = new System.Web.Script.Serialization.JavaScriptSerializer(); serializer.Serialize(dataSet); javascript function json() { $.ajax({ url: ××.aspx.cs, type: "get", dataType: 'json', error: function () { alert("情報の読み込みに失敗しました"); }, success: function (data) { 　　　　　　　alert("data"); } }); } こちらでは、情報の読み込みに失敗しましたとアラートが出てしまいます。 http://qiita.com/rbtnn/items/b2ec6c7dee792e66ac75 http://aspnet.keicode.com/basic/jquery-ajax-basics.php この２つのサイトを参考にしています。 dataSetの中身に目的のリストが取得できているのは確認済みです。 何がいけないのでしょうか。 どうやったらJSONをjavascriptで読み込めるのでしょうか。 どなたかよろしくお願いします。

  • 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); }

  • jQueryで配列JSONの読み込み方法

    phpからの返り値data（json形式）を表示したいのですがうまくいきません。 コンソール上でjsonを取得できているようなのですが、値を表示しようとするとundifinedと表示されてしまいます。 どのように書き換えれば動作するようになるのでしょうか？ よろしくおねがいします！ -------------------------------------------------------- ■ receive.js　■ -------------------------------------------------------- $.ajax({ type: "POST", url: "receive.php", data: { "id": 3 }, success: function(data){ console.log(data); alert(data.time); //ここで「undifined」のエラーが出ます！！ $("#go").after(data.id); //ここは何も表示されません。 $("#str").html('準備完了'); }, error: function(data){ $("#str").html('準備未完了'); }, }); -------------------------------------------------------- ■　receive.php　■ -------------------------------------------------------- <?php require 'dbconnect.php';//dbconnectを呼び出し $data = array(); $id = $_POST['id']; $sql = " SELECT * FROM sample_table WHERE id = " . $id; $result = mysqli_query($connect,$sql) or die("クエリの送信に失敗しました。<br />SQL:".$sql); while ($row = mysqli_fetch_array($result)) { $data[] = $row; } mysqli_close($connect) or die("MySQL切断に失敗しました。"); // MySQLへの接続を閉じる header('Content-Type: application/json; charset=utf-8'); echo json_encode($data); ?> -------------------------------------------------------- ■　index.html　■ -------------------------------------------------------- <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="text/javascript" src="./js/jquery-1.7.2.min.js"></script> <title>PHP * jQuery * ajax * MySQL</title> <script type="text/javascript" src="receive.js"></script> <script type="text/javascript" src="post.js"></script> </head> <body> <div class="ltd-form"> <form id="inquiry-form" method="get"> <fieldset> ・ ・ ・ </fieldset> <div id="go"></div> </form> </div> <div id="str"></div> </body> </html> -------------------------------------------------------- ■　実行後のChromeのコンソール　■ -------------------------------------------------------- 0: Object 0: "3" 1: "1423789247" 2: "96" 3: "963" data1: "96" data2: "963" id: "3" time: "1423789247" --------------------------------------

  • 別URLからのJSON取得がうまくいかないので教えてください

    楽天書籍検索APIをJSONで取得したいのですが、うまく表示されません。 以下のソースで何がまずいか教えていただけますでしょうか。 ※[YOUR_developerID]にはIDが入っているものとします <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>JSON</title> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.2.6");</script> <script type="text/javascript"> $(function(){ $.getJSON("http://api.rakuten.co.jp/rws/2.0/json?developerId=[YOUR_developerID]&operation=BooksTotalSearch&version=2009-03-26&keyword=%E3%82%AC%E3%83%B3%E3%83%80%E3%83%A0&sort=-releaseDate", function(jsonData){ $(jsonData.Body.BooksBookSearch.Items.Item).each(function(){ $("body").append(this.title+"<hr />"); }) }) }) </script> </head> <body>

  • jquery PHP 値　ajax

    失礼します。現在jqueryで作成した２次元配列をPHP側に渡したいのですが上手くいきません。 jquery側のコンソールで確認した際にはsuccessの処理が行われ配列の中身がjson形式で表示されるのですが、その内容をPHP側で確認しようとするとNULLが返ってきてしまいます。 何卒ご教授よろしくお願いいたします。 html側 $(function(){ // 送るデータ形式はJSONでなければ、PHP側でエラーが出る.のでJSON.stringify()でJSON形式に変換 send_data= JSON.stringify(data); // 送信処理 $.ajax({ url: "ajax.php", // 送信先のPHP type: "POST", // POSTで送る contentType: "Content-Type: application/json; charset=UTF-8", //必須ではなさそうだが、サーバ側との整合のために明示しておいた方がよい。 // dataType: 'json', //受信形式 必須ではなさそうだがサーバ側との整合のために明示しておいた方がよい。 data:send_data //JSON形式の送信データ }).success(function(data, status, xhr) { // 通信成功時の処理 console.log("success"); console.log("data ="+data); console.log("status ="+status); console.log("xhr ="+xhr); }).error(function(xhr, status, error) { // 通信失敗時の処理 console.log("error"); }).complete(function(xhr, status) { // 通信完了時の処理 console.log("fin"); }); }) }) PHP側 二通り試してみました。 <?php //php://inputはPOSTの生データを取得できる $json = file_get_contents("php://input"); //JSON形式データをPHPの配列型に変換 $data = json_decode($json); var_dump($data) ; //POSTできたデータを格納 $hoge = $_POST['data']; var_dump($hoge);

    • ベストアンサー
    • AJAX
  • 複数のjsonファイルを「もっと見る」ボタンで出力

    プログラム初心者です。 Instagramからハッシュタグで画像を抽出し、「もっと見る」ボタンで少しずつHTMLに出力したいです。 ↓こちらのブログを参考にさせていただき、Instagramの画像をHTMLに出力するところまで、何とか辿り着きました。 http://blog.hello-world.jp.net/php/2777/ <script> $(function() { $.ajax({ url: "json/1.json", dataType: "json", error: function(jqXHR, textStatus, errorThrown) { $("#content").text(textStatus); }, success: function(data) { var dataArray = data; $.each(dataArray, function(i){ $("#content").append("<div><p id='" + dataArray[i].id + "'><a href='" + dataArray[i].link + "' target='_blank'><img src='" + dataArray[i].image_url + "'></a></p></div>"); }); } }); }); </script> この状態だと1枚目のjsonしか読み込んでいないので、2枚目以降のファイルも2.json、3.json…「もっと見る」ボタンで取得するようにしたいのですが、知識が足りず。。。 ↓こちらのサイトのように、スクロールで表示させるものでも良いのですが。 http://nekostagram.com/ 詳しい方、ご協力いただけるとありがたいです。 どうぞよろしくお願いいたします。m(__)m

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する