Example code of html formatting json
|
Without further ado, I will post the code for you directly. The specific code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<link rel="stylesheet" href="https://rawgithub.com/yesmeck/jquery-jsonview/master/dist/jquery.jsonview.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="https://rawgithub.com/yesmeck/jquery-jsonview/master/dist/jquery.jsonview.js"></script>
<script type="text/javascript">
var json = {"hey": "guy","anumber": 243,"anobject": {"whoa": "nuts","anarray": [1,2,"thr<h1>ee"],"anotherarray": [1, 2], "more":"stuff"},"awesome": true,"bogus": false,"meaning": null, "japanese":"明日がある。", "link": "http://jsonview.com", "notLink": "http://jsonview.com is great"};
$(function() {
$('#json').JSONView(json);
$('#collapse-btn').on('click', function() {
$('#json').JSONView('collapse');
});
$('#expand-btn').on('click', function() {
$('#json').JSONView('expand');
});
$('#toggle-btn').on('click', function() {
$('#json').JSONView('toggle');
});
$('#toggle-level1-btn').on('click', function() {
$('#json').JSONView('toggle', 1);
});
$('#toggle-level2-btn').on('click', function() {
$('#json').JSONView('toggle', 2);
});
});
</script>
</head>
<body>
<br/>
<button id="collapse-btn">Collapse</button>
<button id="expand-btn">Expand</button>
<button id="toggle-btn">Toggle</button>
<button id="toggle-level1-btn">Toggle level1</button>
<button id="toggle-level2-btn">Toggle level2</button> <div id="json"></div>
</body>
</html>As shown in the demo, the formatted json is displayed The above is the example code of HTML formatted JSON introduced by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website! |
<<: Enabling or disabling GTID mode in MySQL online
Recommend
Detailed explanation of the concept of docker container layers
Table of contents 01 Container consistency 02 Con...
Vue+openlayer5 method to get the coordinates of the current mouse slide
Preface: How to get the coordinates of the curren...
Tutorial on how to quickly deploy a Nebula Graph cluster using Docker swarm
1. Introduction This article describes how to use...
Display special symbols in HTML (with special character correspondence table)
Problem Reproduction When using HTML for editing,...
Detailed explanation of application scenarios of filters in Vue
filter is generally used to filter certain values...
15 Best Practices for HTML Beginners
Here are 30 best practices for HTML beginners. 1....
Detailed explanation of Mysql logical architecture
1. Overall architecture diagram Compared to other...
Vue uses mockjs to generate simulated data case details
Table of contents Install mockjs in your project ...
Using Nginx to implement grayscale release
Grayscale release refers to a release method that...
MySQL optimization connection optimization
In the article MySQL Optimization: Cache Optimiza...
mysql5.6.zip format compressed version installation graphic tutorial
Preface: MySQL is a relational database managemen...
MySQL Community Server 8.0.12 installation and configuration method graphic tutorial
MySQL 8 brings a brand new experience, such as su...
MySQL date processing function example analysis
This article mainly introduces the example analys...
A brief discussion on mobile terminal adaptation
Preface The writing of front-end code can never e...
Docker cross-server communication overlay solution (Part 1) Consul single instance
Table of contents Scenario Task idea analyze Conc...