JqueryでJsonのデータを受け取るときの処理

Question

Array
(
[0] => Array
(
[date] => 2014年07月01日
[message] => 時間が入力されていません
)
[1] => Array
(
[date] => 2014年07月02日
[message] => 時間が入力されていません
)
[2] => Array
(
[date] => 2014年07月03日
[message] => 時間が入力されていません
)
[3] => Array
(
[date] => 2014年07月04日
[message] => 時間が入力されていません
)
)
というデータをJsonにしてデータ渡しをします。
受け取った側での処理が分かりません。

$(function(){
	//エラーを表示
	$('#btn_wt_errors').click(function(){
		$.ajax({
				type: "POST",
				url: "/emp/EU026",
				dataType: "json",
				cache: false,
				success: function(data, status){
					$('#Modal_Wt_Table').modal();
					$('#wt_error_list').empty();
					$("#wt_error_list").append('<tr><th>日付</th><th style="text-align:left">内容</th></tr>');
					var j  = 0;
					jQuery.each(data, function(i, val) {
						alert(data[i].val);
//						alert(data[i]);
//						$.each(data,function(i) {$('#dep').append($('<option>').attr({ value: i }).text(data[i]));
//						$('#wt_error_list').append('<tr><td>' + i + '</td><td style="text-align:left"><a class="str" href="#">' + data[i] + '</a></td></tr>');
						j++;
					});

					if(j > 0){
						$('#wt_error_list_no').modal();
					}
					var options = {
						currPage : 1, //最初に表示するページ
						optionsForRows : [1,5,10], //表示する行数
						rowsPerPage : 20, //デフォルト表示行数
						firstArrow : (new Image()).src="/images/first.gif",
						prevArrow : (new Image()).src="/images/prev.gif",
						lastArrow : (new Image()).src="/images/last.gif",
						nextArrow : (new Image()).src="/images/next.gif",
					}
					$('#wt_error_list').tablePagination(options);
			},
			error: function(XMLHttpRequest, status, errorThrown){
				alert("エラーが発生しました！");
			}
		});
	});
});

eachの部分の処理の仕方を教えてください。
宜しくお願いいたします。

Answer 1

each()で繰り返してJsonデータを取得する場合、eval()を利用して、Json対象に変換します。
また、eachのcallback関数のパラメータ２を利用、メンバーの値を取得できますね。

下記の例を参考してください。

        var arr = '[{ data: "20160404", message: "OK_4" }, { data: "20160405", message: "OK_5" }, { data: "20160406", message: "OK_6" }, { data: "20160407", message: "OK_7" }]';
$.each(eval("(" + arr + ")"), function (i, obj) {
    alert(obj.data);
});

出力内容は、
20160404
20160405
20160406
20160407

Comments

[kei344]

dataType: "json" にした場合、JSON.parse() されて帰ってくると思います。また、パースには JSON.parse() を使えば事足りますよ。

【jQuery.getJSON() | jQuery API Documentation】
http://api.jquery.com/jquery.getjson/

【JSON.parse 関数 (JavaScript)】
https://msdn.microsoft.com/ja-jp/library/cc836466(v=vs.94).aspx

[HiroshiWWW]

kei344さんへ：

ご提示ありがとうございました。

文字列形式のJson（{ "data": "20160404", "message": "OK_4" }）として、JSON.parseは実行可能ですが、対象形式のJson（{ data: "20160404", message: "OK_4" }）として、JSON.parseは実行不可です。
よって、{ data: "20160404", message: "OK_4" }から{ "data": "20160404", "message": "OK_4" }に変換し、どうすればよいでしょうか。

[kei344]

あ、書いておられる文字列はたしかにパースできませんね。すいません。ただ、「対象形式のJson」は聞いたことがないのですが、どの仕様か教えていただけませんか？
パース出来ないのは、JSONとして解釈できない文字列だからという気がします。

【JavaScript Object Notation - Wikipedia】
[https://ja.wikipedia.org/wiki/JavaScript_Object_Notation](https://ja.wikipedia.org/wiki/JavaScript_Object_Notation)

JSONは「キーとして使うデータ型は文字列に限る」と書かれています。Wikipedia情報ですが、仕様にも書いてあった気がします。

【RFC 7159 - The JavaScript Object Notation (JSON) Data Interchange Format】
https://tools.ietf.org/html/rfc7159#page-6
> An object structure is represented as a pair of curly brackets
> surrounding zero or more name/value pairs (or members).
> A name is a string.

Answer 2

$('#wt_error_list').append('<tr><td>' + val.date + '</td><td>' + val.message + '</td></tr>');
で取得できました