JSON をオブジェクトに変換するときに注意したいこと

公開日: : JavaScript , ,

おそらくですが、これから書く内容は常識なんだと思います。

が、その常識を知らなかったためにかなりの時間をムダにしてしまったので、忘れないためにメモしておきます。

Head in Hands

photo credit: Alex E. Proimos via photopin cc

目次

1. 使用したライブラリ

使用したライブラリと、そのバージョンは次の通りです。

1-1. jQuery

jQuery はセレクタだけに使用しています。

このサンプルに jQuery は必須ではないのですが、もう慣れてしまったので jQuery がないと面倒くさい。。。

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

2. JSON に改行文字が含まれているとオブジェクトへの変換に失敗する

冒頭で書いた「常識」というのは、見出しにもあるように「JSON に改行文字が含まれているとオブジェクトへの変換(パース処理)に失敗する」ってことです。

これを知らなかったため、ずいぶんと時間をムダに使ってしまいました。

現在 Android アプリ開発をしていて、、、

  1. 非同期処理内で SQLite にアクセスしてデータを取得する
  2. 取得したデータを Google Gson を使って JSON に変換
  3. 変換した JSON をloadUrl メソッドを使って WebView に 送る
  4. WebView 側で JSON をオブジェクトに変換する
  5. 変換したオブジェクトを Underscore.js を使ってレンダリングする

という部分の実装をしていたときにみごとにハマりました。。。

何が原因で変換に失敗するのかさっぱり検討も付かず、JSON に定義してある項目を1つずつ試すなど地道な作業でやっと原因の特定にいたしました。
これはホントにつらかった。。。

2-1. JSON に改行文字が含まれていない場合

コードスニペットを残すこともないくらい単純なのですが、せっかくなのでコードを貼り付けておきます。

まずは HTML から。

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset=utf8>
        <title></title>
    </head>
    <body>
        <div id="note"></div>
        
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
        <script type="text/javascript" src="./js/script.js" charset="utf8"></script>
    </body>
</html>

続いて JavaScript。

$(function() {
    var json = getMusicString();
    var music = JSON.parse(json);
    $('div#note').append(music.artist + ":" + music.title);
});

function getMusicString() {
    return '{"artist":"Duft Pank", "title":"Get Lucky"}';
}

2-2. JSON に改行文字が含まれている場合

HTML は上記と同じなので、こちらは JavaScript だけ。

$(function() {
    var json = getMusicString();
    var music = JSON.parse(json);
    $('div#note').append(music.artist + ":" + music.title);
});

function getMusicString() {
    return '{"artist":"Duft\nPank", "title":"Get Lucky"}';
}

こちらは実行すると “SyntaxError” みたいなエラーメッセージが出力されるはずです。

3. JSON をオブジェクトに変換する方法

ここからは補足です。

上記の JavaScript では、JSON をオブジェクトに変換する際に JSON.parse を使っていますが、変換にはいくつか方法があるようなのでメモしておきます。

JSON.parse だけ知っていれば事足りそうなので特に必要ないかもしれませんが。

3-1. eval で変換する

eval を使ってオブジェクトに変換することもできますが、セキュリティ的に問題ありなので使っちゃダメです。

3-2. JSON.parse を使ってパースする

2番目の方法は、上記でも取り上げた JSON.parse です。

JSON.parse をサポートしていないブラウザもあるようですが、モダンブラウザであれば問題ないようです。

3-3. jQuery を使う

最後に jQuery の parseJSON 関数を使ってもオブジェクトに変換できます。

var obj = jQuery.parseJSON(json);

最近の開発では jQuery はほぼ必須になってますから、こちらを使っても良さそうです。

4. まとめ

開発の仕事してる限り、これはずっと忘れないと思います。

これまで散々同じようなことをしてきたのに、この現象が発生しなかったことが不思議でならない。。。

5. その他の JavaScript に関する記事

その他の JavaScript に関する記事は次の通りです。
気になる記事があったらぜひチェックしてみてください!

Googleアドセンス用(PC)

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

関連記事

icatch-exception_2482521750_mini-thumbnail

Error オブジェクトの種類と独自例外オブジェクトの作成方法

JavaScript で例外オブジェクトを扱ったことがなかったので、簡単な内容ですが例外オブジェクト

記事を読む

icatch-where

jQuery を使ってファイルアップロードフォームのファイルが選択されているかを確認する方法

HTML に設置したファイルアップロードフォームにファイルが選択されているかを確認する方法を調べまし

記事を読む

icatch-googlemap_3384995399_mini-thumbnail

GoogleMap を使って住所から緯度・経度を計算する

先日も GoogleMpa のジオコーディングを使った地図を表示するメモをアップしましたが、今回も

記事を読む

icatch-load_6161289029_mini-thumbnail

Grunt の grunt-contrib-watch を使うと CPU 使用率が上がるので spawn: false を試してみた結果

grunt-contrib-watch を使うことで、ユニットテストを実行したり、サイトをリロードし

記事を読む

icatch-flag_1395019914_mini-thumbnail

GoogleMaps の JavaScript API(v3) を使って、常に1つの InfoWindow だけ表示されるように制御する

前回アップした GoogleMaps の JavaScript API (v3) を使って地図上に複

記事を読む

icatch-bootstrap3

TwitterBootstrap3 をベースにした画面に GoogleMap を埋め込む

このところ立て続けに GoogleMap を JavaScript から扱う記事を投稿してます。 意

記事を読む

icatch-googlemap_3384984991_mini-thumbnail

住所から GoogleMap を表示するサンプル

ここ直近の2プロジェクトで緯度・経度(もしくは住所)から GoogleMap を表示する要件がありま

記事を読む

icatch-disappear_7186028511_mini-thumbnail

GoogleMapsAPIを使ってMarkerの表示と非表示を切り替える方法

GoogleMaps API(v3) を使って地図上に表示されている Marker を非表示にする方

記事を読む

icatch-darts_1543970905_mini-thumbnail

GoogleMapsAPIを使って緯度・経度からMarkerを作成する方法

GoogleMaps API(v3) を使って、指定した緯度・経度の地点に Marker を表示する

記事を読む

icatch-format_mini-thumbnail

JavaScriptなどをフォーマットするGruntプラグイン grunt-jsbeautifier を使ってみる

Java を使ってプログラムを書いているときはソースコードをフォーマットするのに、JavaScrip

記事を読む

Googleアドセンス用(PC)

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


7 + 九 =

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Googleアドセンス用(PC)

icatch-jersey_multi_pathparams
Jerseyの@PathParamはスラッシュの間に複数指定できる

http://hoge-api/user/{id}.{format}

icatch-vagrant_box_customize
VagrantのBoxファイルをカスタマイズして独自のBoxファイルを作成する

配布されている Vagrant の Box ファイルを使って検証環境を

icatch-2015-006-1
バリデーションチェックにJava8のOptionalを使ってスマートに書く(自分比)

Web アプリのバリデーションチェックにアノテーションを使うことが増え

icatch-2015-005-1
ユニットテストの偏りを防ぐ命名規則の付け方

ユニットテスト名に以下の命名規則を付けるようにして二ヶ月ぐらい経った。

icatch-2015-004-1
Vagrantで起動したCentOS上のOctopressをホストOSから確認する設定

タイトルの通りだが、Vagrant を使って起動した CentOS に

→もっと見る

PAGE TOP ↑