Ajaxの返り値が取得できているのに未定義

Question

$(function(){
var likes = null;

$('#like').on('click', function() {
    getLikes(hotelid).done(function(res) {
      likes = res.likes;
      console.log(res);
      console.log(likes);//NULL
      if (!$(this).hasClass('liked')) {
　　　//今は何もしない

      }
    });
  });
});

これを実行するとconsole.log(res)には

[{likes: "234"}] (1)

という値が返ってきますが、console.log(likesを出力するとNULLになります。
どう対処すれば良いですか。

Answer 1

[{likes: "234"}]なので配列の中にオブジェクトがある状態です。
よって
取得方法はres[0].likesでは

Comments

[Chandler_Bing]

ありがとうございました。それで上手く行きました。
今までは同じ形(res.likes)で取れていました。
なぜこのような形になったのでしょうか。変えたところは取得先のDBの情報を全カラム取得から、
特定のカラムのみ取得すように変えたくらいです。

[rururu3]

それに関してはサーバー側のプログラム見ないとわからないので、なんとも言えないですが、JavaScriptでいうオブジェクト返してたのが配列を返すようになったのではと思います。

[rururu3]

あと、配列になってるので、配列数などチェックするなり、全配列文処理するならforEachなど使うようにしてくださいね

[Chandler_Bing]

ありがとうございます。

Answer 2

オブジェクトのメンバだけを参照しても未定義のlikesという変数扱いにしかなりません。
オブジェクト名をつけてconsole.log(res[i].likes)としてください。

iはインデックス番号なので、ひととおり取得したいならばforでループさせるといいです

for(let i = 0 ; i < res.length ; i++){
    console.log(res[i].likes); //データの取得
}

あるいは

$.each(res,function(idx,row){
    console.log(row.likes); //データの取得
})

とする方法もあります。パフォーマンスを考慮するならforの方が速いですけどね。

Comments

[Chandler_Bing]

ありがとうございます。それだと未定義になります。

[FKM]

すみません、よく見たら配列の中にオブジェクトが入っていましたね、インデックス番号が必要でした。

それを記述しようとしたら、rururu3氏と同じ意見となりましたので、具体的な式を残しておきます。