jsonview penggunaan jquery

JSONView ialah pemalam penyemak imbas yang sangat mudah untuk melihat data format JSON dalam penyemak imbas. Dalam artikel ini, kami akan memperkenalkan cara pemalam JSONView berfungsi dengan jQuery, membolehkan kami melihat data JSON dengan mudah dengan cara yang boleh dibaca.

Pemasangan pemalam penyemak imbas JSONView

Mula-mula, kami perlu memasang pemalam JSONView dalam penyemak imbas kami. JSONView tersedia dalam pelbagai versi, termasuk versi untuk penyemak imbas seperti Chrome, Firefox dan Safari. Kami akan merangkumi versi Chrome dan Firefox bagi pemalam JSONView di sini. Anda boleh mengaksesnya melalui pautan berikut:

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

Setelah JSONView dipasang, anda boleh memformat data berformat JSON dengan mengklik kanan padanya dan memilih "JSONView: Format JSON" melihat dan melihat data.

Menggunakan pemalam jQuery dan JSONView

Untuk menggunakan pemalam jQuery dan JSONView, skrip pemalam jQuery dan JSONView mesti diimport ke dalam halaman terlebih dahulu. Kita boleh mencapainya dengan menambahkan teg berikut pada halaman:

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

Seterusnya, kita perlu mentakrifkan objek JavaScript yang mengandungi data JSON. Dalam artikel ini, kami akan menggunakan sampel data JSON berikut:

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"
    }
  ]
};

Kini kami boleh menggunakan jQuery dan pemalam JSONView untuk melihat data JSON ini dengan cara yang boleh dibaca. Kita boleh menggunakan kod berikut dalam halaman untuk mencapai ini:

$(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);
});

Kod ini mula-mula menukar data JSON kepada rentetan dan menggunakan pemalam JSONView untuk memformat dan memaparkannya dalam elemen HTML dengan ID "json" .

Apabila menggunakan pemalam JSONView, anda juga boleh memberikan pilihan untuk menyesuaikan perwakilan. Dalam artikel ini, kami akan menggunakan pilihan berikut:

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

Pilihan ini akan menjadikan data JSON sentiasa berkembang, runtuh secara rekursif dan memasukkan beberapa ruang putih tambahan dalam output untuk meningkatkan kebolehbacaan. Oleh itu, kami boleh menggunakan kod berikut untuk menggunakan pilihan tersuai:

$(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);
});

Ringkasnya, kami telah melihat cara melihat data JSON dalam cara yang boleh dibaca menggunakan jQuery dan pemalam JSONView. JSONView ialah pemalam penyemak imbas yang sangat berguna yang memudahkan untuk memformat dan menyemak imbas data berformat JSON. Dengan menggabungkan jQuery, kami boleh menjadikan paparan data JSON lebih mudah dan boleh disesuaikan.

Atas ialah kandungan terperinci jsonview penggunaan jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!