In general, front-end and back-end interaction is all we need to extract and use the data we need from json, but if rewriting a very long JSON presentation is undoubtedly painful, two more concise frameworks are recommended for JSON visualization:
jquery.json-viewer (Official website)
This framework import needs to depend on jQuery. After that, just import a js file and a css file to complete the configuration. The relevant files can be given on the official website. GitHub address Download, here is my demo code, notably the four parameters (collapsed, rootCollapsable, withQuotes, withLinks), which are described on this website
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script src="js/jquery.json-viewer.js" type="text/javascript" charset="utf-8"></script> <link rel="stylesheet" type="text/css" href="css/jquery.json-viewer.css" /> </head> <body> <button onclick="expand()">Open</button> <button onclick="collapse()">Fold</button> <pre id="json-renderer"></pre> <script type="text/javascript"> var data = { "id": 1001, "type": "donut", "name": "Cake", "description": "http://www.jq22.com", "price": 2.55, "available": { store: 42, warehouse: 600 }, "topping": [ { "id": 5001, "type": "None" }, { "id": 5002, "type": "Glazed" }, { "id": 5005, "type": "Sugar" }, { "id": 5003, "type": "Chocolate" }, { "id": 5004, "type": "Maple" } ] } function expand() { $("#json-renderer").jsonViewer(data, { collapsed: false, rootCollapsable: true, withQuotes: false, withLinks: true }); flag = false; }; function collapse() { $("#json-renderer").jsonViewer(data, { collapsed: true, rootCollapsable: true, withQuotes: false, withLinks: true }); flag = true; }; </script> </body> </html>
The effect is as follows
JsonEditor (Official website)
This framework is more versatile and allows you to visually add, modify, and delete json s, using operations that you can add, modify, and delete from GitHub address For json data, we only need to pay attention to the file jsoneditor.js, which can be easily modified to suit our needs. Here is my simplified code
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="jsoneditor.css"/> <link rel="icon" href="logo-small.png"/> <title>Flexi JSON Editor and Inspector</title> <style> body { padding: 0 70px; } #json { margin: 10px 10px 10px 32px; width: 50%; min-height: 70px; } h1 { font-family: Arial; color: #EBBC6E; text-align: center; text-shadow: 1px 1px 1px black; border-bottom: 1px solid gray; padding-bottom: 50px; width: 500px; margin: 20px auto; } h1 img { float: left; } h1 b { color: black; font-weight: normal; display: block; font-size: 12px; text-shadow: none; } #legend { display: inline; margin-left: 30px; } #legend h2 { display: inline; font-size: 18px; margin-right: 20px; } #legend a { color: white; margin-right: 20px; } #legend span { padding: 2px 4px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; color: white; font-weight: bold; text-shadow: 1px 1px 1px black; background-color: black; } #legend .string { background-color: #009408; } #legend .array { background-color: #2D5B89; } #legend .object { background-color: #E17000; } #legend .number { background-color: #497B8D; } #legend .boolean { background-color: #B1C639; } #legend .null { background-color: #B1C639; } #expander { cursor: pointer; margin-right: 20px; } #footer { font-size: 13px; } #rest { margin: 20px 0 20px 30px; } #rest label { font-weight: bold; } #rest-callback { width: 70px; } #rest-url { width: 700px; } label[for="json"] { margin-left: 30px; display: block; } #json-note { margin-left: 30px; font-size: 12px; } .addthis_toolbox { position: relative; top: -10px; margin-left: 30px; } #disqus_thread { margin-top: 50px; padding-top: 20px; padding-bottom: 20px; border-top: 1px solid gray; border-bottom: 1px solid gray; } </style> <!--<script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-5029684-7']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); </script>--> </head> <body> <!--<h1> <img src="logo-small.png" alt="FlexiJSONEditor logo" /> <span>JSON Editor and Inspector</span> <b>Inspect your JSON structures with ease.</b> </h1> <div id="legend"> <span><a href="http://www.daviddurman.com">Blog post & Usage</a></span> <span id="expander">Expand all</span> <span class="array">array</span> <span class="object">object</span> <span class="string">string</span> <span class="number">number</span> <span class="boolean">boolean</span> <span class="null">null</span> <span>Remove item by deleting a property name.</span> </div> <div id="rest"> <label>JSONP: </label><br/> Callback: <input type="text" id="rest-callback" value="_callback" /> URL: <input type="text" value="" id="rest-url" /> <button id="btn-rest-url">display JSON</button> </div>--> <pre id="path"></pre> <div id="editor" class="json-editor"></div> <!--<label for="json">Or paste JSON directly here:</label>--> <!--<p id="json-note">Note that you can edit your JSON directly in the textarea below. The JSON viewer will get updated when you leave the field.</p>--> <!--<textarea id="json"></textarea><br/>--> <!--<p id="footer">Copyright © 2011-2013 David Durman (client IO, <a href="http://client.io">http://client.io</a>, org@client.io)</p>--> <script src="json2.js"></script> <script src="jquery.min.js"></script> <script src="jquery.jsoneditor.js"></script> <script src="jsoneditor.js"></script> </body> </html>
The effect is as follows