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-class_303144538_mini-thumbnail

JavaScript のクラス定義

最近 JavaScript を使う機会が増えてきて、快適にコードが書けるように環境を少しずつ整えてき

記事を読む

icatch-bootstrap3

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

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

記事を読む

icatch-googlemap_3384984991_mini-thumbnail

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

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

記事を読む

icatch-checkbox-147904_640

jQuery を使ってチェックボックスのチェックを付けたり外したりするコードスニペット

jQuery を使ってチェックボックスの ON/OFF を操作する方法ですが、以前実装したときのコー

記事を読む

icatch-template_mini

Underscore.js の template と each を使って JSON から select タグを生成する

Underscore.js を使って、都道府県名を定義してある JSON から select タグを

記事を読む

icatch-pointer_7269926502_mini-thumbnail

GoogleMaps の JavaScript API (v3) を使って地図上に複数の Marker を表示するサンプル

これまで GoogleMaps API を使って Marker やら InfoWindow を表示す

記事を読む

icatch-switch_mini

jQuery を使って表示する画像を setInterval を使って切り替える

画面に表示する画像を一定期間で切り替えるスニペットです。 スライドショー的なプラグインで済ますこと

記事を読む

icatch-painting_mini

jQuery を使ってタグに設定されているクラスをすべて取り除いた後に指定のクラスに変更する

jQuery を使ってタグに設定されているすべてのクラスを取り除いた後に指定のクラスを設定する方法で

記事を読む

icatch-load_6161289029_mini-thumbnail

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

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

記事を読む

icatch-darts_1543970905_mini-thumbnail

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

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

記事を読む

Googleアドセンス用(PC)

Message

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


× 八 = 48

次の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 ↑