🧊

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.