JavaScript Jsonデータの取り出しについて

Question

初歩的な質問ですが、ご回答いただけるとありがたいです。

JavascriptでJsonのデータを出力したいのですがうまく出力できません。
どのように取り出すべきかアドバイスをいただけると幸いです。

表示をしたいdataはreturnDataに入っています。
returnDataはajaxで受け取ったデータです。

function doDataRefresh()
	{
		$.ajax( // promiseを返す
				{
					url:"/checkdb",
					type:"POST"
				})
				.done(function(returnData){
					if(returnData.length > 3) {
						console.log(returnData);
						console.log(returnData[0].name);
						console.log(returnData.length);
						
					}
				})
				.fail(function(xhr) {console.log('error')});
		return false;
	}

#console.log(returnData)を実行

[ {
  "name" : "John",
  "date" : "04/01 17時44分"
}, {
  "name" : "taro",
  "date" : "04/01 17時47分"
} ]

このデータのそれぞれの要素を取り出したいです。

console.log(returnData[0].name);
console.log(returnData[0].date);

として出力をすると名前と時間を表示したいのですがundefinedが出力されます。
データの取り出し方に問題があるとは思うのですが
どのように取り出すべきなのでしょうか？

Comments

[退会済みユーザー]

returnData が何だか不明です。それをどのように取得しているのか、あなたが書いた JavaScript のコードを質問欄に追記してください。。

[encho]

修正依頼ありがとうございます
質問を編集させていただきました。

[退会済みユーザー]

期待する応答がサーバーから返されているかどうかを Fiddler などのキャプチャツールを使って調べる、ブラウザの開発者ツールなどを使ってデバッグし変数 retrunData の中身を調べてみてはいかがですか？

[encho]

chromeの開発ツールを使ってconsoleに表示されたデータが質問文に書いたconsole.log(returnData)の出力なので、
期待する応答はサーバーから帰ってきていると認識しています。

Answer 1

自分で JOSN.parse してもいいですが、$ajax に dataType: 'json' を指定すれば jQuery がやってくれます。
参考: jQuery.ajax() | jQuery API Documentation

        $.ajax( // promiseを返す
                {
                    url:"/checkdb",
                    type:"POST",
                    dataType: 'json'
                })
                .done(function(returnData) {
                    returnData.forEach(data => {
                        console.log(data.name);
                        console.log(data.date);
                    });
                })
                .fail(function(xhr) {console.log('error')});

Comments

[encho]

こちらの方法で解決させていただきました。
アドバイスありがとうございました。

Answer 2

JSON Parse()でオブジェクトにパースしてみては。

Answer 3

普通のブラウザなら

fetch('url',{method:'post'}).then(res=>res.json()).then(data=>{
 //dataをいじって
 console.log(data);
});

Comments

[yambejp]

postで送るだけでパラメータを渡さないならgetでも
よさげですけどね

Answer 4

まずは以下の data を returnData に修正してみるといかがでしょうか？

Comments

[encho]

すみませんここはコピペミスでした修正しておきます

Answer 5

gentaroさんがほぼ答えになってますけど、
その質問者さんが試しているようなアクセス方式ができるJavascriptオブジェクトの状態なら、
console.logの結果は「Array(2) [Object, Object]」になります。

つまりreturnDataはただのJSON形式の文字列なだけって話ですね。
なのでそれをJavascriptオブジェクトにしてくれるJSON.parse()を使って変換すればいいと思います。

const returnData = `[ {
    "name" : "John",
    "date" : "04/01 17時44分"
  }, {
    "name" : "taro",
    "date" : "04/01 17時47分"
  } ]`;

const obj = JSON.parse(returnData)

console.log(obj[0].name);
//John
console.log(obj[0].date);
//04/01 17時44分

Comments

[encho]

ありがとうございます。とても参考になりました。