实现JSON在线美化(格式化)、JSON转CSV、CSV转XML工具-toolfk程序员工具网

      本文要推荐的[ToolFk]是一款程序员经常使用的线上免费测试工具箱,ToolFk 特色是专注于程序员日常的开发工具,不用安装任何软件,只要把内容贴上按一个执行按钮,就能获取到想要的内容结果。ToolFk还支持  BarCode条形码在线生成、 QueryList采集器、 PHP代码在线运行、 PHP混淆、加密、解密、 Python代码在线运行JavaScript在线运行YAML格式化工具HTTP模拟查询工具HTML在线工具箱JavaScript在线工具箱CSS在线工具箱JSON在线工具箱Unixtime时间戳转换Base64/URL/Native2Ascii转换CSV转换工具箱XML在线工具箱WebSocket在线工具Markdown 在线工具箱Htaccess2nginx 转换进制在线转换在线加密工具箱在线伪原创工具在线APK反编译在线网页截图工具在线随机密码生成在线生成二维码Qrcode在线Crontab表达式生成在线短网址生成在线计算器工具。等20多个日常程序员开发工具,算是一个非常全面的程序员工具箱网站。

網站名稱:ToolFk

網站鏈結:https://www.toolfk.com/

工具链接:https://www.toolfk.com/tool-format-json

代码教學

本工具[在线JSON格式化、JSON转CSV、JSON转XML]主要依赖下面三个JS库

https://github.com/nashwaan/xml-js#readme

https://github.com/evanplaice/jquery-csv

https://www.oschina.net/code/snippet_119610_11825

页面如下

STEP 1

STEP 2

核心代码如下

<script type="text/javascript">

        var excerptRows = 7;

        function renderCSV(objects) {

            var rows = $.csv.fromObjects(objects, {justArrays: true});

            if (rows.length < 1) return;

            var table = document.createElement("table");

            var thead = document.createElement("thead");

            var tr = document.createElement("tr");

            var header = rows[0];

            for (field in header) {

                var th = document.createElement("th");

                $(th).text(header[field]);

                tr.appendChild(th);

            }

            thead.appendChild(tr);

            var tbody = document.createElement("tbody");

            for (var i=1; i<rows.length; i++) {

                tr = document.createElement("tr");

                for (field in rows[i]) {

                    var td = document.createElement("td");

                    $(td)

                        .text(rows[i][field])

                        .attr("title", rows[i][field]);

                    tr.appendChild(td);

                }

                tbody.appendChild(tr);

            }

            table.appendChild(thead);

            table.appendChild(tbody);

            return table.outerHTML;

        }

        function json_to_csv(message){

            var json = jsonFrom(message);

            if (json) {

                var inArray = arrayFrom(json);

                var outArray = [];

                for (var row in inArray)

                    outArray[outArray.length] = parse_object(inArray[row]);

                var value =  renderCSV(outArray.slice(0, excerptRows));

                toolfk.report('json_to_csv',value);

                return value;

            } else {

                var msg = "@lang('toolfk.lang_text_valid_txt')";

                layer.msg(msg);

                return msg;

            }

        }

        function json_to_xml(message){

          var value=  json2xml(message, {compact: true, spaces: 4});

          toolfk.report('json_to_xml',value);

          return value;

        }

        $(function(){

            var sourceArea = toolfk.create_codeMirror('code');

            var targetArea = toolfk.create_codeMirror('result','text/html');

            $("#CollapsibleView").click(function(){

                $id("CollapsibleViewDetail").style.visibility = $id("CollapsibleView").checked ? "visible" : "hidden";

                var source = sourceArea.getValue();

                if(source==''){

                    return layer.msg('@lang('toolfk.lang_context_not_empty')');

                }

                $(targetArea.getWrapperElement()).hide();

                Process(source);

            });

            $("#QuoteKeys").click(function(){

                window.QuoteKeys = $id("QuoteKeys").checked;

                var source = sourceArea.getValue();

                if(source==''){

                    return layer.msg('@lang('toolfk.lang_context_not_empty')');

                }

                $(targetArea.getWrapperElement()).hide();

                Process(source);

            });

            $("#TabSize").click(function(){

                var source = sourceArea.getValue();

                if(source==''){

                    return layer.msg('@lang('toolfk.lang_context_not_empty')');

                }

                $(targetArea.getWrapperElement()).hide();

                Process(source);

            });

            $(".convert-btn-format").click(function(){

                if (toolfk.beautify_default.beautify_in_progress) {

                    return;

                }

                var source = sourceArea.getValue();

                if(source==''){

                    return layer.msg('@lang('toolfk.lang_context_not_empty')');

                }

                toolfk.beautify_default.beautify_in_progress = true;

                $(targetArea.getWrapperElement()).hide();

                Process(source);

                toolfk.beautify_default.beautify_in_progress = false;

            });

            $(".convert-btn").click(function(){

                if (toolfk.beautify_default.beautify_in_progress) {

                    return;

                }

                var source = sourceArea.getValue();

                if(source==''){

                    return layer.msg('@lang('toolfk.lang_context_not_empty')');

                }

                toolfk.beautify_default.beautify_in_progress = true;

                $(targetArea.getWrapperElement()).show();

                $("#Canvas").hide();

                var func_method = $(this).data("func");

                var func        =  eval(func_method);

                var result      =  func(source);

                targetArea.setValue(result);

                toolfk.beautify_default.beautify_in_progress = false;

            });

        });

    </script>

值得一試的三個理由:

整合各種程序员开发中经常使用的开发测试工具。

简洁美观大气的网站页面

支持 在线格式化执行代码、APK在线反编译、在线高强度密码生成、在线网页截图 等二十多種工具服务

同时还推荐一下它的姐妹网www.videofk.com视频下载工具箱

本文链接:http://www.hihubs.com/article/368

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,980评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,178评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,868评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,498评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,492评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,521评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,910评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,569评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,793评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,559评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,639评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,342评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,931评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,904评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,144评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,833评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,350评论 2 342

推荐阅读更多精彩内容