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

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

ただいまの
回答率

87.49%

javascript Objのプロパティへのアクセス方法

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 461

score 7

前提・実現したいこと

JavaScript初心者です。一人では全く見当もつかず解決できないため、質問しました。
同じソース内で似た様な処理が複数あるのコードをリファクタリングしたいです。
ですがコードを変更するとプロパティにアクセスできず値を取得できず困っています。

発生している問題

Uncaught TypeError: Cannot read property '0' of undefined

objの中にデータは入っていそうなのですが、キーを探すと何も表示されません。(変更後コード画像イメージ参照。)

変更前コード

function hoge() {
 //RailsのCSRF対策
  $.ajaxPrefilter(function(options, originalOptions, jqXHR) {
    var token;
    if (!options.crossDomain) {
      token = $('meta[name="csrf-token"]').attr('content');
      if (token) {
        return jqXHR.setRequestHeader('X-CSRF-Token', token);
      }
    }
  })
  $.ajax({
    url: "/act_history/edit",
    type: "post",
    datatype: "json",
    data: JSON.stringify(eventData)
  }).done(function(data) {
    console.log(data);
    console.log(data[0].from_ymd);
  }).fail(function(XMLHttpRequest, textStatus, errorThrown) {
  })


コンソール
イメージ説明

変更後コード

function hoge() {
  var url = "/act_history/edit";
  var type = "post";
  var eventData = {
    title:  data.title,
    start:  moment(data.start).format("YYYY-MM-DD HH:mm"),
    end:    moment(data.end).format("YYYY-MM-DD HH:mm")
  }
  var ajaxReturnObj = ajaxConection(eventData, url, type);
  console.log(ajaxReturnObj);
  var key = Object.keys(ajaxReturnObj);
  console.log(key);
  console.log(ajaxReturnObj.resData.from_ymd);
}

/**
 * ajax通信
 */
function ajaxConection(eventData, url, type) {
  //RailsのCSRF対策
  $.ajaxPrefilter(function(options, originalOptions, jqXHR) {
    var token;
    if (!options.crossDomain) {
      token = $('meta[name="csrf-token"]').attr('content');
      if (token) {
        return jqXHR.setRequestHeader('X-CSRF-Token', token);
      }
    }
  });

  var returnObj = new Object;
  $.ajax({
    url: url,
    type: type,
    data: JSON.stringify(eventData)
  }).done(function(data) {
    returnObj.resFlg = true;
    returnObj.resData = data;
  }).fail(function(XMLHttpRequest, textStatus, errorThrown) {
    returnObj.resFlg = false;
    returnObj.resData = XMLHttpRequest;
  })
  return returnObj;
}


コンソール
イメージ説明

試したこと

var returnObj = new Objectを
var returnObj = {} としてハッシュにしても変わらず。

補足情報(FW/ツールのバージョンなど)

Rails 5.2.3

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

checkベストアンサー

+2

$.ajax()は非同期処理なので、return returnObj;で値を返す時点では、レスポンスをまだ取得していません。

問題を解決するには、ajaxReturnObjを操作する処理をdone()の中に書くか、deferredを返してthenで受けるか、async awaitで書くか、になるかと思います。いずれにせよ同期処理には帰って来れません。

$.ajax()で同期処理をさせることもできますが、非推奨です。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2019/09/04 19:20

    ご指摘ありがとうございます。
    おっしゃる通り、非同期処理なので値が帰っててこないことを確認いたしました。
    done()で記述し、動作することを確認いたしました。

    キャンセル

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

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

関連した質問

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