質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

5回答

1772閲覧

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

encho

総合スコア182

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

2クリップ

投稿2020/04/02 23:15

編集2020/04/03 01:35

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

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

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

js

1function doDataRefresh() 2 { 3 $.ajax( // promiseを返す 4 { 5 url:"/checkdb", 6 type:"POST" 7 }) 8 .done(function(returnData){ 9 if(returnData.length > 3) { 10 console.log(returnData); 11 console.log(returnData[0].name); 12 console.log(returnData.length); 13 14 } 15 }) 16 .fail(function(xhr) {console.log('error')}); 17 return false; 18 }

#console.log(returnData)を実行

console

1[ { 2 "name" : "John", 3 "date" : "04/01 17時44分" 4}, { 5 "name" : "taro", 6 "date" : "04/01 17時47分" 7} ]

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

js

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

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2020/04/02 23:37

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

2020/04/02 23:43

修正依頼ありがとうございます 質問を編集させていただきました。
退会済みユーザー

退会済みユーザー

2020/04/02 23:51

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

2020/04/03 00:05 編集

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

回答5

0

ベストアンサー

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

js

1 $.ajax( // promiseを返す 2 { 3 url:"/checkdb", 4 type:"POST", 5 dataType: 'json' 6 }) 7 .done(function(returnData) { 8 returnData.forEach(data => { 9 console.log(data.name); 10 console.log(data.date); 11 }); 12 }) 13 .fail(function(xhr) {console.log('error')});

投稿2020/04/03 01:14

hoshi-takanori

総合スコア7893

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

encho

2020/04/03 01:37

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

0

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

投稿2020/04/03 00:12

gentaro

総合スコア8949

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

普通のブラウザなら

javascript

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

投稿2020/04/03 01:45

yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yambejp

2020/04/03 01:46

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

0

まずは以下の datareturnData に修正してみるといかがでしょうか?

イメージ説明

投稿2020/04/03 01:17

jun68ykt

総合スコア9058

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

encho

2020/04/03 01:35

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

0

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

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

javascript

1const returnData = `[ { 2 "name" : "John", 3 "date" : "04/01 17時44分" 4 }, { 5 "name" : "taro", 6 "date" : "04/01 17時47分" 7 } ]`; 8 9const obj = JSON.parse(returnData) 10 11console.log(obj[0].name); 12//John 13console.log(obj[0].date); 14//04/01 17時44分

投稿2020/04/03 00:37

編集2020/04/03 00:51
yureighost

総合スコア2183

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

encho

2020/04/03 01:37

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問