サンプル ⇒ display JSON text data by canvas with jQuery

サンプルの JSON データ (jquery_json.json) :


{
  "foo" : "bar",
  "text" : [
    "hello",
    "こんにちは",
    "good bye",
    "さようなら"
  ]
}

サンプルの HTML + JavaScript ソースコード (jquery_json.html) :


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>display JSON text data by canvas with jQuery</title>
<style type="text/css">
#mycanvas {
  border: solid 3px #000;
}
</style>
<script src="http://www.nilab.info/lib/js/jquery-1.4.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
 
var canvas;
var context;
 
window.onload = function() {
 
  // canvas
  canvas = document.getElementById('mycanvas');
  context = canvas.getContext('2d');
  
  context.fillStyle = "rgb(255, 255, 255)";
  context.fillRect(0, 0, 500, 500);
  
  context.fillStyle = "rgb(255, 0, 0)";
  context.font = 'italic 400 12px/2 Unknown Font, sans-serif';
  context.fillText("hello", 200, 200);
 
  jQuery.ajax({
    url : 'jquery_json.json',
    dataType : 'json',
    //dataType : 'text',
    success : function(data, dataType){
      var json = data;
      //var json = $.parseJSON(data);
      //var json = JSON.parse(data);
      var texts = json['text'];
      alert(texts);
      var fontsize = 14;
      var texts = data.text;
      for(var i=0; i<texts.length; i++){
        context.fillStyle = "rgb(0, 0, 0)";
        context.fillText(texts[i], 100, fontsize * (i+1));
      }
    },
    error : function(xmlHttpRequest, textStatus, errorThrown){
      alert(textStatus);
    }
  });
}
</script>
</head>
<body>
<h1>display JSON text data by canvas with jQuery</h1>
<canvas id="mycanvas" width="500" height="500"></canvas>
</body>
</html>

以下は、すぐに忘れてしまう、大切なこと。

JSON の文字列はシングルクォートで括れない

ダブルクォーテーションでくくりましょう。

文字列は、2重引用符で囲われてバックスラッシュエスケープされたゼロ文字以上のユニコード文字の集まりです。一つの文字も、一つの文字列として表されます。文字列は、CまたはJavaの文字列によく似ています。

JSON

JavaScript のオブジェクトと JSON は別物

オブジェクトはキーと値のペアをコロンで対にして、これらの対をコンマで区切ってゼロ個以上列挙し、全体を中かっこでくくることで表現する。例えば以下のように表現する：

{"name": "John Smith", "age": 33}

ここで注意することはキーとして使うデータ型は文字列に限ることである。したがって、

{name: "John Smith", age: 33}

という表記は許されない。この後者の表記はJavaScriptのオブジェクトの表記法としては正しいが、JSONとしては不正な表記である。

JavaScript Object Notation - Wikipedia

jQuery.getJSON ではエラー時の処理ができない

エラー処理などをしたいときは jQuery.ajax を使いましょう。

⇒ jQuery.ajax(options) - jQuery 日本語リファレンス
⇒ jQuery.getJSON( url, data, callback ) - jQuery 日本語リファレンス

ちょっと疑問(というかぜんぜんわかんにゃいこと)

dataType : 'json' ではうまく動作するのに、
dataType : 'text' で取得したテキストを jQuery.parseJSON または JSON.parse したんじゃうまくいかなかった。なんでだろー。

tags: javascript json jquery

Posted by NI-Lab. (@nilab)