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

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

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

記事を読む

icatch-simcity_536954375_mini-thumbnail

GoogleMapsAPIを使ってMarkerを削除する方法

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

記事を読む

icatch-painting_mini

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

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

記事を読む

icatch-plug_8436280178_mini-thumbnail

TwitterBootstrap3 用のバリデーションチェックプラグイン BootstrapValidator の導入から Live チェックまでを試してみた

BootstrapValidator は、TwitterBootstrap3 で構築したサイト用の

記事を読む

icatch-where

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

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

記事を読む

icatch-template_mini

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

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

記事を読む

icatch-load_6161289029_mini-thumbnail

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

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

記事を読む

icatch-switch_mini

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

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

記事を読む

icatch-googlemap_4866826566_mini-thumbnail

GoogleMap の Marker に InfoWindow を設定するサンプル

GoogleMap の Marker には InfoWindow を使って付加情報を設定できます。

記事を読む

icatch-drill_mini

Underscore.js の template を使ってドリルダウンを実装するスニペット

先日、Underscore.js の template と each を使って JSON から se

記事を読む

Googleアドセンス用(PC)

Message

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


1 × 三 =

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