├── css ├── d.png └── visualizer.css ├── .gitattributes ├── .gitignore ├── LICENSE ├── index.html └── lib └── visualizer.js /css/d.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/moappi/visualizer.json2html/HEAD/css/d.png -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | 4 | # Custom for Visual Studio 5 | *.cs diff=csharp 6 | 7 | # Standard to msysgit 8 | *.doc diff=astextplain 9 | *.DOC diff=astextplain 10 | *.docx diff=astextplain 11 | *.DOCX diff=astextplain 12 | *.dot diff=astextplain 13 | *.DOT diff=astextplain 14 | *.pdf diff=astextplain 15 | *.PDF diff=astextplain 16 | *.rtf diff=astextplain 17 | *.RTF diff=astextplain 18 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Windows image file caches 2 | Thumbs.db 3 | ehthumbs.db 4 | 5 | # Folder config file 6 | Desktop.ini 7 | 8 | # Recycle Bin used on file shares 9 | $RECYCLE.BIN/ 10 | 11 | # Windows Installer files 12 | *.cab 13 | *.msi 14 | *.msm 15 | *.msp 16 | 17 | # Windows shortcuts 18 | *.lnk 19 | 20 | # ========================= 21 | # Operating System Files 22 | # ========================= 23 | 24 | # OSX 25 | # ========================= 26 | 27 | .DS_Store 28 | .AppleDouble 29 | .LSOverride 30 | 31 | # Thumbnails 32 | ._* 33 | 34 | # Files that might appear on external disk 35 | .Spotlight-V100 36 | .Trashes 37 | 38 | # Directories potentially created on remote AFP share 39 | .AppleDB 40 | .AppleDesktop 41 | Network Trash Folder 42 | Temporary Items 43 | .apdisk 44 | -------------------------------------------------------------------------------- /css/visualizer.css: -------------------------------------------------------------------------------- 1 | /* ------------ Visualizer ------------- */ 2 | 3 | .visual-package {padding:3px;border-radius:2px;margin-top:3px;} 4 | .visual-header {cursor:pointer;} 5 | 6 | .visual-name {color:gray;} 7 | 8 | .visual-array {background-color:#FFD8BB;border:thin solid #FFB780;} 9 | .visual-object {background-color:#E7F1FE;border:thin solid #7DA2CE;} 10 | .visual-string {color:red;} 11 | .visual-number {color:blue;} 12 | .visual-function {color:green;} 13 | 14 | .visual-open .visual-children {display:block;} 15 | .visual-closed .visual-children {display:none;} 16 | 17 | .visual-arrow {background-image:url("d.png"); background-repeat:no-repeat; background-color:transparent; height:15px; width:15px; display:inline-block;} 18 | 19 | .visual-open .visual-arrow {background-position:-20px 0;} 20 | .visual-closed .visual-arrow {background-position:0 0;} 21 | 22 | .visual-type {color:gray;font-size:8pt;float:right;} 23 | 24 | .hide { 25 | display:none !important; 26 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License 2 | 3 | Copyright (c) 2020 JSON2HTML. https://json2html.com/ 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. 22 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 34 | 35 | -------------------------------------------------------------------------------- /lib/visualizer.js: -------------------------------------------------------------------------------- 1 | // visualizer.json2html.js 2 | // https://www.json2html.com 3 | // (c) 2006-2020 Crystalline Technologies 4 | // json2html may be freely distributed under the MIT license. 5 | 6 | function visualizer($node) { 7 | 8 | var base = this; 9 | 10 | //Create a new visualizer attached to the result tab 11 | base.node = $node; 12 | 13 | //Transform used to convert into HTML 14 | base.transform = {"<>":"div","class":"visual-package visual-${show} visual-${type}","html":[ 15 | {"<>":"div","class":"visual-header","html":[ 16 | {"<>":"div","class":function(obj){ 17 | 18 | var classes = ["visual-arrow"]; 19 | 20 | if( base.getValue(obj.value) !== undefined ) classes.push("hide"); 21 | 22 | return(classes.join(" ")); 23 | }}, 24 | {"<>":"span","class":"visual-name","text":"${name}"}, 25 | {"<>":"span","class":"visual-value","text":function(obj) { 26 | var value = base.getValue(obj.value); 27 | if( value !== undefined ) return(" : " + value); 28 | else return(""); 29 | }}, 30 | {"<>":"span","class":"visual-type","text":"${type}"} 31 | ]}, 32 | {"<>":"div","class":"visual-children","html":function(obj){return(base.children(obj.value));}} 33 | ]}; 34 | } 35 | 36 | visualizer.prototype = { 37 | 38 | "visualize":function(json){ 39 | 40 | var base = this; 41 | 42 | //Convert json into html 43 | base.node.empty().json2html(base.convert("json",json,"open"),base.transform); 44 | 45 | //Set the events 46 | base.events(); 47 | }, 48 | 49 | //Get a specific value from the json object 50 | "getValue":function(obj) { 51 | var type = $.type(obj); 52 | 53 | //Determine if this object has children 54 | switch(type) { 55 | case "array": 56 | case "object": 57 | return(undefined); 58 | break; 59 | 60 | case "function": 61 | //none 62 | return("function"); 63 | break; 64 | 65 | case "string": 66 | return("'" + obj + "'"); 67 | break; 68 | 69 | default: 70 | return(obj); 71 | break; 72 | } 73 | }, 74 | 75 | //Transform the children 76 | "children":function(obj) { 77 | 78 | var base = this; 79 | 80 | var type = $.type(obj); 81 | 82 | //Determine if this object has children 83 | switch(type) { 84 | case "array": 85 | case "object": 86 | return(json2html.transform(obj,base.transform)); 87 | break; 88 | 89 | default: 90 | //This must be a litteral 91 | break; 92 | } 93 | }, 94 | 95 | //Convert this json object to HTML 96 | "convert":function(name,obj,show) { 97 | 98 | var base = this; 99 | 100 | var type = $.type(obj); 101 | 102 | if(show === undefined) show = "closed"; 103 | 104 | var children = []; 105 | 106 | //Determine the type of this object 107 | switch(type) { 108 | case "array": 109 | //Transform array 110 | //Itterrate through the array and add it to the elements array 111 | var len=obj.length; 112 | for(var j=0;j