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

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

ただいまの
回答率

87.80%

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

解決済

回答 5

投稿 編集

  • 評価
  • クリップ 2
  • VIEW 845

score 122

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

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が出力されます。
データの取り出し方に問題があるとは思うのですが
どのように取り出すべきなのでしょうか?

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • SurferOnWww

    2020/04/03 08:37

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

    キャンセル

  • encho

    2020/04/03 08:43

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

    キャンセル

  • SurferOnWww

    2020/04/03 08:51

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

    キャンセル

  • encho

    2020/04/03 08:56 編集

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

    キャンセル

回答 5

checkベストアンサー

+4

自分で 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')});

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/04/03 10:37

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

    キャンセル

+3

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

+2

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分

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/04/03 10:37

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

    キャンセル

+2

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

イメージ説明

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/04/03 10:35

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

    キャンセル

+2

普通のブラウザなら

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/04/03 10:46

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

    キャンセル

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

  • ただいまの回答率 87.80%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る