【javascript/jQuery】JSON形式のデータの表示確認をする

公開日: : JavaScript/jQuery

スポンサーリンク

PHPであれば「var_dump」や「print_r」などでJSON形式のデータの中身が思い通りの者になっているかどうか簡単に確認することができるのでjavascriptでもそういったのが無いのか探しました。

JSON.stringify

JqueryにあるJSON.stringifyメソッドを使用すればJSONデータを文字列に直すことができます。なので、文字列にしたデータをalertで確認したり、appendやhtmlなど使って要素に追加などして確認することができます。(下例参照)。

ブラウザのデバッグ機能を使う

console.logやconsole.dirを使えば多くのデバッガでその内容を確認することができます。ブラウザによって表示される内容は多少異なるようで、console.dirの方がプロパティを見やすい形にしてくれるようです。

$(function(){
    var obj = {
        田中:{
            id:1,
            year:2012,
            month:12,
            day:8
        },
        山田:{
            id:2,
            year:2013,
            month:4,
            day:23
        },
        佐藤:{
            id:3,
            year:2014,
            month:6,
            day:11
        }
    };

    //1.文字列に変換して確かめる
    var str = JSON.stringify(obj);
    $("body").html(str);

    //2.デバッガで確認する
    //console.log(obj);
    console.dir(obj);
});

結果)
consoledirimg

(※FireFoxのFireBugというデバッガを使用しています)

スポンサーリンク
Amazon
  • このエントリーをはてなブックマークに追加

関連記事

【jQuery UI】タブをクリックしたときのイベントでselectが使えない

jQuery UIは1.10のバージョンではタブをクリックしたときのイベントの名前が変わっているよう

記事を読む

【javascript/jQuery】強制的にページをスクロールさせる方法

強制的にページをスクロールさせたいと思って調べていたのですが、なかなか思うようなものが見つからず困っ

記事を読む

【ImgToAA】画像をAA化するツール

指定の画像を読み込ませてAA化するツールです。サンプルはこちら。 (使い方) 画像ファイ

記事を読む

スマホ向け幅固定サイトの回転時の幅対応方法

幅固定サイトでのスマホ回転時Webサイトの横幅を合わせる方法のメモ。 下記2点の設定が必要です。

記事を読む

【jQuery】hasClass is not a functionエラー

jQueryでセレクタを使って取得してきたjQueryオブジェクトからその子要素をchildrenで

記事を読む

【jQuery/javascript】はてなボタンを動的に設置する

はてなブックマークのボタンをページの読み込みが終わった後にjavascript(jQuery)で追加

記事を読む

【javascript】RSSを読み込んで表示させる【Google Feed API】

jQueryで簡単にRSSフィードを表示させる方法としてGoogleFeedAPIを利用するというの

記事を読む

【jQuery UI】タブの初期状態を選択するとエラーがでて失敗する

jQuery UIでタブをプログラム側から選択させるには以下のようなコードを書けばいい…といったこと

記事を読む

スクレイピングをサポートしてくれるAPI【kimono】

kimonoというスクレイピングをAPI化してくれるという素晴らしいサービスがあります。

記事を読む

tableデータから棒グラフを描画できるjQueryプラグインTableBarChartを使ってみる

グラフを作成することについて 既存のtableデータから簡単に棒グラフの作成できるTableBar

記事を読む

【Laravel5】既存のDBからデータを取得して表示する

はじめに 今まで作ったWebサイトをLaravel5で見れるようにし

【C++/OpenCV】cv::Matの画像にインパルスノイズを付加する

OpenCVで画像にノイズを付け足したいと思って調べたところ、Pyth

Intel Corei7-7700TでHTC Viveの動作確認

はじめに HTC ViveというVRヘッドセットで遊んでみたのでその

【Python】フォルダ内のカッコ付き数字ファイルを一括でリネームするスクリプト

はじめに タイトルどおりなのですが、指定フォルダ内のファイルのファイ

OpenCV3.1のTracking APIでトラッキングを試す

はじめに 先日OpenCV3.1をopencv_contrib付きで

パソコンを複数台使う際便利なツール

はじめに 先日、機械学習用にGPUを積んだBTOパソコンを購入しまし

OpenCV3.1をopencv_contrib付きでVisual Studio2013でビルドしてインストールする

はじめに OpenCV3.1でトラッキングがしたいと思いインストーラ

→もっと見る

  • Author : ががんぼ
    プログラミングやWeb関係で気付いたことについてメモしていく予定。だいたいが備忘録ですが、自分でサンプルを作って動かしてみたりしています。
PAGE TOP ↑