Web页面json formatter

插件源码

定义一个javascript类
var JSONFomartter() = {
//主方法,参数1为你需要转换的json对象,注意是对象而不是字符串,第二个参数则是你希望的缩进表示字符串,例如你可传进"    "四个空格作为缩进标准
format:function(jsonObject, indexStr) {
    //如果未传缩进标准参数,则按默认处理
    if (arguments.length < 2) {
        var indexStr = "";
    }
    var indexStrStyle = "    ";
    //通过调用方法getType获取json对象的类型,例如数组
    var objectType = getType(jsonObject);

    // 根据json对象类型分情况处理
    if (objectType == "array") {
        if (jsonObject.length == 0) {
            return "[]";
        }
        var sHTML = "[";
    } else {
        var iCount = 0;
        $.each(jsonObject, function() {
            iCount++;
            return;
        });
        if (iCount == 0) { // object is empty
            return "{}";
        }
        var sHTML = "{";
    }

    // 遍历对象中的key和value并添加缩进
    var iCount = 0;
    $.each(jsonObject, function(sKey, vValue) {
        if (iCount > 0) {
            sHTML += ",";
        }
        if (objectType == "array") {
            sHTML += ("\n" + indexStr + indexStrStyle);
        } else {
            sHTML += ("\n" + indexStr + indexStrStyle + "\"" + sKey + "\"" + ": ");
        }

        // display relevant data type
        switch (getType(vValue)) {
            case "array":
            case "object":
                sHTML += FormatJSON(vValue, (indexStr + indexStrStyle));
                break;
            case "boolean":
            case "number":
                sHTML += vValue.toString();
                break;
            case "null":
                sHTML += "null";
                break;
            case "string":
                sHTML += ("\"" + vValue + "\"");
                break;
            default:
                sHTML += ("TYPEOF: " + typeof(vValue));
        }
        iCount++;
    });

    if (objectType == "array") {
        sHTML += ("\n" + indexStr + "]");
    } else {
        sHTML += ("\n" + indexStr + "}");
    }

    return sHTML;
},

//获取对象类型
getType:function(obj) {
  if (typeof(obj) == "object") {
    if (obj === null) return "null";
    if (obj.constructor == (new Array).constructor) return "array";
    if (obj.constructor == (new Date).constructor) return "date";
    if (obj.constructor == (new RegExp).constructor) return "regex";
    return "object";
  }
  return typeof(obj);
}    
}

使用方法

直接调用 JSONFormatter.format(object,"     ");

//例如有这样的json字符串
var json = "{‘name‘:‘harry‘,‘sex‘:‘body‘}";
//调用
JSONFormatter.format(JSON.parse(json));

优化

配合highlight.js效果更佳,如下:

{
        "result": [
            {
                "name": "吐槽",
                "id": "336efba7-259d-4057-ae1e-679e81419cd7",
                "module": "life"
            }
        ]    }
时间: 2024-08-26 14:54:35

Web页面json formatter的相关文章

Android ios嵌套web页面

我们现在做一个活动页面,Android和ios的活动页面用web来做,方便更改,下面有几个小问题: 1.在Android和ios中,虽然web上面可以存localstorage,但是到了Android和ios上面就失效了,也就是说不能存储localstorage,而cookie是可以存储: 2.Android和ios传参给web页面这个和简单,只需要在web端写一个正常的函数,在Android和ios直接调用方法,以下的data就是传回来的参数,如 function receiveAppWish

玩转web之json(五)---将表单通过serialize()方法获取的值转成json

form表单有一个serialize()方法,可以序列化表单的值,但是jquery提供的这个方法会把数据序列化为类似下面的形式: a=1&b=2&c=3&d=4 jquery并没有提供将表单数据序列化为json的方法,所以需要我们自己封装一下,下面给出代码和测试样例,先写一个js文件: $.ajaxSetup({ contentType: "application/x-www-form-urlencoded; charset=utf-8" }); var Dat

前端的小玩意(9.3)——做一个仿360工具箱的web页面(我的工具里的模板和样式)

前端的小玩意(9.1)--做一个仿360工具箱的web页面(Tab按钮切换) http://blog.csdn.net/qq20004604/article/details/52216203 前端的小玩意(9.2)--做一个仿360工具箱的web页面(全部工具里面的模板) http://blog.csdn.net/qq20004604/article/details/52226223 (三)我的工具页面布局 如图: 首先将其分为二部分: 第一部分是上方整体红色方框区域: 包含若干个独立按钮,按钮

前端的小玩意(9.4)——做一个仿360工具箱的web页面(自动生成所有图标,对图标添加响应逻辑)

前端的小玩意(9.1)--做一个仿360工具箱的web页面(Tab按钮切换) http://blog.csdn.net/qq20004604/article/details/52216203 前端的小玩意(9.2)--做一个仿360工具箱的web页面(全部工具里面的模板) http://blog.csdn.net/qq20004604/article/details/52226223 前端的小玩意(9.3)--做一个仿360工具箱的web页面(我的工具里的模板和样式) http://blog.c

Ehcache(09)——缓存Web页面

http://haohaoxuexi.iteye.com/blog/2121782 页面缓存 目录 1       SimplePageCachingFilter 1.1      calculateKey 1.2      可配置的初始化参数 1.2.1     cacheName 1.2.2     blockingTimeoutMillis 2       SimpleCachingHeadersPageCachingFilter 3       SimplePageFragmentCac

使用Web页面配置ESP8266的参数

前言 使用Web页面配置ESP8266的参数相对于使用串口AT指令配置更加直观和简单.与配置路由器方式类似. 基本思路 基本思路是ESP8266工作AP模式下,作为TCP Server监听TCP Client的连接.因为网页HTTP默认的端口是80,所以ESP8266作为TCP Server的端口需要设置为80.电脑连接上ESP8266的AP后,网页访问默认IP地址192.168.4.1,此时ESP8266就会收到来自网页的HTTP的Get请求,此请求数据为HTML格式.ESP8266收到请求后

FineBI如何在web页面中嵌入式集成

1. API嵌入集成 1.1 描述 FineBI是基于B/S架构的浏览器/服务器模式,现在用户开发的系统基本上趋向于B/S架构的浏览器/服务器模式,因此有些页面完全可以直接采用web页面嵌入式集成的简易方式完成集成.而且些因为框架的原因可以采用json的调用方式进行集成.通过集成,用户从自己的系统通过链节使用浏览器访问FineBI的服务器,从而在自己系统内调用BI的web页面,来实际嵌入式集成.这种集成通常会有两种方式:一种是直接使用URL链节,另一种方式是通过js的调用json来获得分析模板.

谷歌/微软/必应web页面免费翻译插件

随着网络时代的日益壮大,现在我们经常需要浏览一些各种外语的网页,或者是查阅资料帮助我们解决问题.更多的时候还是头疼在语言障碍上,正所谓"它认识你,你不认识它啊."谷歌和微软两个企业,作为当下科技领域的龙头企业,都有着各自针对翻译的解决方案,而且还非常易用.本文我就像大家介绍一下谷歌/微软/必应这三款web页面翻译工具. v写在前面 很多时候,可能我们web项目中需要的只是机械式的翻译,并不需要什么利用xml或者js json等等实现逼真翻译,那样工作量太大.这时候可能你就需要这几款小工

web api\ protobuf \formatter

9:50:20吴X2014/11/7 9:50:20 9:55:14吴X2014/11/7 9:55:14webapi实现protobuf吴X2014/11/7 9:56:29http://www.strathweb.com/2013/02/asp-net-web-api-and-protocol-buffers/9:58:39吴X2014/11/7 9:58:39 林XX2014/11/7 9:59:28 10:00:46吴X2014/11/7 10:00:46我们不生产技术,我们是大自然的搬