jsonview jquery usage

JSONView is a very convenient browser plug-in for viewing JSON format data in the browser. In this article, we will introduce how the JSONView plugin works with jQuery, allowing us to easily view JSON data in a readable way.

JSONView browser plug-in installation

First, we need to install the JSONView plug-in in our browser. JSONView is available in many different versions, including ones for browsers such as Chrome, Firefox, and Safari. We will cover the Chrome and Firefox versions of the JSONView plugin here. You can access them via the following link:

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

After installing JSONView, you can format JSON-formatted data by right-clicking on it and selecting "JSONView: Format JSON" ize and view data.

Using jQuery and JSONView plug-ins

In order to use jQuery and JSONView plug-ins, the scripts of jQuery and JSONView plug-ins must first be imported into the page. We can achieve this by adding the following tag to the page:

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

Next, we need to define a JavaScript object that contains the JSON data. In this article, we will use the following sample 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"
    }
  ]
};

Now we can use jQuery and the JSONView plugin to view this JSON data in a readable way. We can use the following code in the page to achieve this:

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

This code first converts the JSON data into a string, and uses the JSONView plug-in to format and display it in the HTML element with the ID "json" .

When using the JSONView plugin, you can also pass options to customize the representation. In this article, we will use the following options:

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

These options will make the JSON data always expanded, recursively collapsed, and include some extra whitespace in the output for increased readability. Therefore, we can use the following code to apply custom options:

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

In summary, we have seen how to view JSON data in a readable way using jQuery and the JSONView plugin. JSONView is a very useful browser plug-in that makes it easy to format and browse JSON-formatted data. By combining jQuery, we can make viewing JSON data more convenient and customizable.

The above is the detailed content of jsonview jquery usage. For more information, please follow other related articles on the PHP Chinese website!