jsonview jQueryの使用法

JSONView は、ブラウザ上で JSON 形式のデータを表示するための非常に便利なブラウザ プラグインです。この記事では、JSONView プラグインが jQuery とどのように連携して、JSON データを読みやすい方法で簡単に表示できるかを紹介します。

JSONView ブラウザ プラグインのインストール

まず、ブラウザに JSONView プラグインをインストールする必要があります。 JSONView は、Chrome、Firefox、Safari などのブラウザー用のバージョンを含め、さまざまなバージョンで利用できます。ここでは、JSONView プラグインの Chrome バージョンと Firefox バージョンについて説明します。次のリンクからアクセスできます。

• Chrome JSONView: https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc
• Firefox JSONView: https:/ /addons.mozilla.org/zh-CN/firefox/addon/jsonview/

JSONView をインストールした後、JSON 形式のデータを右クリックして [JSONView: JSON のフォーマット] を選択することで、JSON 形式のデータをフォーマットできます。 " データをサイズ化して表示します。

jQuery および JSONView プラグインの使用

jQuery および JSONView プラグインを使用するには、まず jQuery および JSONView プラグインのスクリプトをページにインポートする必要があります。これを実現するには、次のタグをページに追加します。

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://raw.githubusercontent.com/bhollis/jsonview/master/src/jquery.jsonview.js"></script>

次に、JSON データを含む JavaScript オブジェクトを定義する必要があります。この記事では、次のサンプル JSON データを使用します。

var person = {
  "name": "John Doe",
  "age": 30,
  "address": {
    "street": "123 Main St",
    "city": "Anytown",
    "state": "CA",
    "zip": 12345
  },
  "phone": [
    {
      "type": "home",
      "number": "555-1234"
    },
    {
      "type": "work",
      "number": "555-5678"
    }
  ]
};

これで、jQuery と JSONView プラグインを使用して、この JSON データを読みやすい方法で表示できるようになります。これを実現するには、ページ内で次のコードを使用します。

$(document).ready(function() {
  // Define the JSON data
  var person = {
    "name": "John Doe",
    "age": 30,
    "address": {
      "street": "123 Main St",
      "city": "Anytown",
      "state": "CA",
      "zip": 12345
    },
    "phone": [
      {
        "type": "home",
        "number": "555-1234"
      },
      {
        "type": "work",
        "number": "555-5678"
      }
    ]
  };

  // Convert the JSON data to a string
  var jsonData = JSON.stringify(person);

  // Use the JSONView plugin to format and display the JSON data
  $('#json').JSONView(jsonData);
});

このコードは、まず JSON データを文字列に変換し、JSONView プラグインを使用してフォーマットし、ID を使用して HTML 要素に表示します。 「json」 。

JSONView プラグインを使用する場合、表現をカスタマイズするオプションを渡すこともできます。この記事では、次のオプションを使用します。

{
  collapsed: false,
  recursive_collapser: true,
  output_padding: true
}

これらのオプションでは、JSON データが常に展開され、再帰的に折りたたまれ、読みやすさを高めるために出力に余分な空白が含まれます。したがって、次のコードを使用してカスタム オプションを適用できます。

$(document).ready(function() {
  // Define the JSON data
  var person = {
    "name": "John Doe",
    "age": 30,
    "address": {
      "street": "123 Main St",
      "city": "Anytown",
      "state": "CA",
      "zip": 12345
    },
    "phone": [
      {
        "type": "home",
        "number": "555-1234"
      },
      {
        "type": "work",
        "number": "555-5678"
      }
    ]
  };

  // Convert the JSON data to a string
  var jsonData = JSON.stringify(person);

  // Define the options for JSONView
  var jsonOptions = {
    collapsed: false,
    recursive_collapser: true,
    output_padding: true
  };

  // Use the JSONView plugin to format and display the JSON data with the custom options
  $('#json').JSONView(jsonData, jsonOptions);
});

要約すると、jQuery と JSONView プラグインを使用して JSON データを読みやすい方法で表示する方法を説明しました。 JSONView は、JSON 形式のデータのフォーマットと参照を容易にする非常に便利なブラウザ プラグインです。 jQueryを組み合わせることで、JSONデータの閲覧をより便利にカスタマイズできるようになります。

以上がjsonview jQueryの使用法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。