<|start_filename|>json_dump.css<|end_filename|>
@font-face {
    font-family: "Yu Gothic";
    src: local("Yu Gothic Medium");
    font-weight: 100;
}

@font-face {
    font-family: "Yu Gothic";
    src: local("Yu Gothic Medium");
    font-weight: 200;
}

@font-face {
    font-family: "Yu Gothic";
    src: local("Yu Gothic Medium");
    font-weight: 300;
}

@font-face {
    font-family: "Yu Gothic";
    src: local("Yu Gothic Medium");
    font-weight: 400;
}

@font-face {
    font-family: "Yu Gothic";
    src: local("Yu Gothic Bold");
    font-weight: bold;
}

@font-face {
    font-family: "Helvetica Neue";
    src: local("Helvetica Neue Regular");
    font-weight: 100;
}

@font-face {
    font-family: "Helvetica Neue";
    src: local("Helvetica Neue Regular");
    font-weight: 200;
}

html {
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, Verdana, Meiryo, "M+ 1p", sans-serif;
}

@media all and (-ms-high-contrast: none) {
    html {
        font-family: Verdana, Meiryo, sans-serif;
    }
}

@media all and (-ms-high-contrast: active) {
    html {
        font-family: Verdana, Meiryo, sans-serif;
    }
}

body {
    border-top: 12px solid #9CCCCC;
    padding: 6px;
    color: #374343;

}

p {
    line-height: 160%;
    margin-left: 12px;
}

textarea {
    border: #ccc 4px solid;
    padding-left: 5px;
    margin-left: 10px;
    border-radius: 10px;
    background: #fcfcfc;
    width: 100%;
    font-family: Consolas, "Courier New", Courier, Monaco, monospace, "ＭＳ ゴシック", "MS Gothic", Osaka−等幅;
}


.indent {
    margin: 0 0 10px 20px;
    padding: 5px 10px;
    border-left: 3px solid #CCCEB4;
}

.indent > .indent {
    margin: 0px 0 10px 20px;
    padding: 5px 10px;
    border-left: 3px solid #B4CEB8;
}

.indent > .indent > .indent {
    margin: 0px 0 10px 20px;
    padding: 5px 10px;
    border-left: 3px solid #B4C8CE;
}

.indent > .indent > .indent > .indent {
    margin: 0 0 10px 20px;
    padding: 5px 10px;
    border-left: 3px solid #B9B4CE;
}

.indent > .indent > .indent > .indent > .indent {
    margin: 0 0 10px 20px;
    padding: 5px 10px;
    border-left: 3px solid #CEB4C0;
}

.key {
    font-weight: bold;
    min-width: 100px;
    display: inline-block;
    line-height: 100%;
    padding: 5px 0;
}

.key:hover {
    background: #ffd;
}


.val {
    padding-left: 10px;
    display: inline-block;
    margin-right: 10px;
}

.place {
    font-size: 90%;
    color: #50A580;
    line-height: 100%;
    display: inline-block;
    margin: 0px 0 5px 0px;
    text-decoration: underline;
    border: 0px dashed;
    width: 350px;
}

.no_val {
    color: #8A8A4E !important;
}

.array {
    color: #A55061 !important;
    padding: 0 10px;
}

#result {
    padding: 10px;
}

#description p{
    margin-left: 12px;
    padding: 6px 12px;
    border-left: 5px solid #9CCCCC;
}

.gotop {
    position: fixed;
    right: 0px;
    bottom: 30px;
    width: 100px;
}

#ads {
    width: 250px;
    float: left;
}


<|start_filename|>json_dump.js<|end_filename|>
$(function(){
        var main = function(){
            autoSaveAndLoad("raw_json");
            $("#result").hide();
        }

        $("#dump_btn").click(function(){
            var json = $("#raw_json").val();
            if (! json) {
                alert("Before visualize, please fill json into blank above.");
                return ;
            }
            var result = dump(json);
            if(result){
                $("#result").hide();
                $("#result").html(result);
                $("#result").show("fast");
                setListner();
            }
        });

        $("#reset_btn").click(function(){
            $("#raw_json").val('');
            $("#result").html('');
        });

        $("#sample_btn").click(function(){
            var sampleJSON ='\
{"team":"Team A","number":3,"users":[ \n\
    {"id":10001,"name":"Alice","age":18}, \n\
    {"id":10002,"name":"Bob","age":14}, \n\
    {"id":10003,"name":"Carol","age":22,"extra":{"birthday":"04/01","locate":"Tokyo"} \n\
}]}';
            $("#raw_json").val(sampleJSON);
            var json = $("#raw_json").val();
            var result = dump(json);
            if(result){
                $("#result").hide();
                $("#result").html(result);
                $("#result").show("fast");
                setListner();
            }
        });

        var getExtraParams = function(){


        };
        var dump = function(json){
            json = trimPadding(json);
            var obj = parseJSON(json);
            var formatted_json = JSON.stringify(obj, null, 4);
            console.log(formatted_json);
            $("#raw_json").val(formatted_json);
            return makeHtml(obj);
        };

        var trimPadding = function(jsonp){
            var match = null;
            var json_obj = '';
            var json_array = '';

            match = jsonp.match(/\{[\s\S]*\}/);
            if(match){
                var json_obj = match.toString();
            }

            match = jsonp.match(/\[[\s\S]*\]/);
            if(match){
                var json_array = match.toString()
            }

            if (json_array.length > json_obj.length) {
                return json_array;
            }
            return json_obj;
        }

        var parseJSON = function(json){
            try{
                var obj = JSON.parse(json);
            } catch(e){
                alert("[ERROR] Wrong JSON Format\n\n" + e);
                console.debug(json);
            }
            return obj;
        }

        var makeHtml = function(obj){
            return "<span class='key'>ROOT</span>" + _make(obj, "");
        }

        var _make = function(obj, nest){
            if (obj == null) {
                return "<span class='val no_val'>(null)</span>"
                     + "<span class='place'>"
                     + nest
                     + "</span>"
                     + "<br>";

            } else if (typeof obj == 'object') {
                var tmp ="<span class='array'>(array)<br></span><div class='indent'>"
                for(o in obj){
                    tmp += "<span class='key'>"
                         + o
                         + "</span>:"
                         + _make(obj[o], nest + "['" + o + "']");
                }
                return tmp + "</div>";

            } else {
                return "<span class='val'>"
                     + _escape(obj)
                     + "</span>"
                     + '<input class="place" size=100 value="data'
                     + nest
                     + '" onclick="this.select();" />'
                     + "<br>";
            }
        }


        var setListner = function(){
            $(".key").click(function(){
                $(this).next(".array").next(".indent").toggle("fast");
            });
            $(".array").click(function(){
                $(this).next(".indent").toggle("fast");
            });
            $(".place").click(function(){
                //alert(this.innerText);
            });

        }
        var _escape = function(ch) {
            if(typeof ch !== 'string')return ch;
            ch = ch.replace(/&/g,"&amp;") ;
            ch = ch.replace(/"/g,"&quot;") ;
            ch = ch.replace(/'/g,"&#039;") ;
            ch = ch.replace(/</g,"&lt;") ;
            ch = ch.replace(/>/g,"&gt;") ;
            return ch ;
        }

        $("#browse_btn").click(function(){
            $("#fileNameText").text("");
            $("#inputFile").val("");
            $('#inputFile').click();
        });

        $("#inputFile").change(function(inputEvent) {
            let timeout_id = setTimeout(selectFileEvent , 1000, inputEvent); // msec
            $("#fileNameText").text("file:" + $("#inputFile")[0].files[0].name);
            $("#result").hide();

        });

        var selectFileEvent = function(inputEvent)
        {
            var files =  inputEvent.target.files;
            var fileReader = new FileReader();
            fileReader.onload = function () {
                $("#raw_json").val(this.result);
                $('#dump_btn').click();
            }
            var file = files[0] ;
            fileReader.readAsText(file) ;
        }

        main();
});


<|start_filename|>index.html<|end_filename|>
<!DOCTYPE html>
<html manifest="/json_dump.appcache">
<head>
    <meta charset="utf-8"/>
    <title>JSON visualizer</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css"
          type="text/css">
    <link rel="stylesheet" href="json_dump.css" type="text/css">
    <link href='http://fonts.googleapis.com/css?family=Inconsolata' rel='stylesheet' type='text/css'>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

    <script src="autosave.js"></script>
    <script src="json_dump.js"></script>

    <script src="gotop.js"></script>

    <style>

    </style>
</head>
<body>
<div class="container">
    <div class="page-header">
        <h1>JSON visualizer</h1>
    </div>
    <div class="span12">
        <p class="pull-right">
            <a type="button" class="btn" id="browse_btn"><i class="icon-file"></i> Load JSON from file</a>
            <a class="btn" id="sample_btn">Try Sample JSON</a>
        </p>
        <input id="inputFile" type="file" style="display:none">
        <textarea class="span12" id="raw_json" cols=70 rows=7
                  placeholder="Please paste the text in JSON format here."></textarea>
        <p>
            <a class="btn btn-info" id="dump_btn">Visualize JSON</a>
            <a class="btn" id="reset_btn">Reset</a>

        </p>

        <span id="fileNameText"></span>
    </div>
    <br clear="all">

    <div id="result"></div>

    <hr>
    <div>
        <div id="description">
            <h2>How To Use</h2>
            <p>
                This service can easily view the data in the form of JSON.<br>
                Paste the JSON String into the box, and press the [Dump JSON] Button.<br>
                Immediately your JSON data is displayed in the form of easy-to-see.<br>
                Please use it for development, such as using JSON API.<br>
                <b>Note:</b> UTF-8 Charset Only.
            </p>

            <h2>System</h2>
            <p>
                This program runs without communication with the server.<br>
                Even sensitive information JSON can be safely visualized.<br>
                This site accesses GoogleAnalytics and GoogleAdsense, but does not use the information entered in the
                JSON.
            </p>

            <h2>Source</h2>
            <p>
                This source is hosted on <a href="https://github.com/pistatium/json_dump">GitHub</a>:
            </p>
        </div>

        <!-- Google Ads -->
        <div id="ads">
            <script src="google_ads.js"></script>
            <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
            <br><br>
            <script src="google_ads.js"></script>
            <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
        </div>
    </div>


</div>

<footer class="footer">
    Copyright(c) 2020 <a href="http://kimihiro-n.appspot.com">Pistatium</a>.
</footer>

</body>

<!-- Google Analytics -->
<script src="google_analytics.js"></script>

</html>
