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
A simple way to put HTML footer at the bottom of the page
Requirement: Sometimes, when the page content is ...
A super detailed Vue-Router step-by-step tutorial
Table of contents 1. router-view 2. router-link 3...
How to install MySQL Community Server 5.6.39
This article records the detailed tutorial of MyS...
Vue implements the sample code of associating the side navigation bar with the Tab page
Table of contents Technology Stack Effect analyze...
Install MySQL 5.7.18 using rpm package under CentOS 7
I have been using MySQL recently. The article mys...
Basic concepts and common methods of Map mapping in ECMAScript6
Table of contents What is a Mapping Difference be...
Practice of using Vite2+Vue3 to render Markdown documents
Table of contents Custom Vite plugins Using vite-...
JavaScript to display hidden form text
This article shares the specific code of JavaScri...
Teach you step by step to develop a brick-breaking game with vue3
Preface I wrote a few examples using vue3, and I ...
How to implement insert if none and update if yes in MySql
summary In some scenarios, there may be such a re...
Solution to the problem that Vue binding objects and array variables cannot be rendered after changing
Project scenario: There is a <ul> tag on th...
Linux View File System Type Example Method
How to check the file system type of a partition ...
HTML page common style (recommended)
As shown below: XML/HTML CodeCopy content to clip...
Web Design Tutorial (8): Web Page Hierarchy and Space Design
<br />Previous article: Web Design Tutorial ...
Detailed explanation of Linux one-line command to process batch files
Preface The best method may not be the one you ca...