🧊

jQuery.ajaxでjsonがうまく取得できない時は

何回やっても取得できない!
jsonの形式も間違ってないし、メソッドも間違えてないはずやのに、なんでや!

そしてミスに気づいた・・その顛末を。

とっても初歩的なミスなので、備忘録として!

かなり古い記事なので、$.ajax().then()とか今風の書き方にはなってないですが、本質的にはまだ通用するっぽいのでそこだけ見てください!

ダメだったケース

$(function(){
  $.ajax({
    type: "GET",
    scriptCharset: 'utf-8',
    url: "sample.json",
    success: function(res){
      console.debug(res[0]); //こいつがイマイチおかしい
    },
    error:function(){console.log('Miss..');}
  });
});

ちゃんと変なものが返ってくるので、何がおかしいんやろうかと。

Why!!

こうしたら動いた

$(function(){
  $.ajax({
    type: "GET",
    scriptCharset: 'utf-8',
    url: "sample.json",
    success: function(res){
      res = $.parseJSON(res);
      console.debug(res[0]); //こうやったら動いた!
    },
    error:function(){console.log('Miss..');}
  });
});

.parseJSON()したらOKになった!わーい。
って、なんかこの一手間・・・ムダじゃないかなーと・・。

そして気づく

$(function(){
  $.ajax({
    type: "GET",
    scriptCharset: 'utf-8',
    dataType:'json', // コレを忘れてた!!
    url: "sample.json",
    success: function(res){
      console.debug(res[0]); //ばっちり読み込み成功!
    },
    error:function(){console.log('Miss..');}
  });
});

今コレを書いてて、なんでこんな凡ミスを・・って思いましたが、
jQueryの.ajaxで何回jsonを取得してもundifinedとか変なのしか返ってこない!!」って方、
dataType忘れてませんか?ということで。

参考:jQuery.ajax() – jQuery API

他にもいーっぱいパラメータがあるので、ちゃんと確認しないとですね!

ちなみに

jsonの内容がおかしいかも・・って時に、便利なサイトがありました。

参考:JSONLint - The JSON Validator.