文档章节

JS格式化显示JSON数据

ZYallers
 ZYallers
发布于 2017/07/20 12:52
字数 392
阅读 50
收藏 0

JS格式化显示JSON数据

APP接口开发,需求提供一个接口测试页面给APP开发者,由于接口调用返回的是经过压缩处理过的JSON数据,直接显示在页面上阅读性比较差,但又不想搞个接口开放平台那样浪费时间,于是便想到直接对返回的JSON数据进行处理。

/* 格式化JSON源码(对象转换为JSON文本) */
function formatJson(txt, compress/*是否为压缩模式*/) {
  var indentChar = '  ';
  if (/^\s*$/.test(txt)) {
    alert('数据为空,无法格式化! ');
    return;
  }
  try {
    var data = eval('(' + txt + ')');
  }
  catch (e) {
    alert('数据源语法错误,格式化失败! 错误信息: ' + e.description, 'err');
    return;
  }
  var draw = [], last = false, This = this, line = compress ? '' : '\n', nodeCount = 0, maxDepth = 0;
  var notify = function (name, value, isLast, indent/*缩进*/, formObj) {
    nodeCount++;
    /*节点计数*/
    for (var i = 0, tab = ''; i < indent; i++)tab += indentChar;
    /* 缩进HTML */
    tab = compress ? '' : tab;
    /*压缩模式忽略缩进*/
    maxDepth = ++indent;
    /*缩进递增并记录*/
    if (value && value.constructor == Array) {/*处理数组*/
      draw.push(tab + (formObj ? ('"' + name + '":') : '') + '[' + line);
      /*缩进'[' 然后换行*/
      for (var i = 0; i < value.length; i++) {
        notify(i, value[i], i == value.length - 1, indent, false);
      }
      draw.push(tab + ']' + (isLast ? line : (',' + line)));
      /*缩进']'换行,若非尾元素则添加逗号*/
    } else if (value && typeof value == 'object') {/*处理对象*/
      draw.push(tab + (formObj ? ('"' + name + '":') : '') + '{' + line);
      /*缩进'{' 然后换行*/
      var len = 0, i = 0;
      for (var key in value) {
        len++;
      }
      for (var key in value) {
        notify(key, value[key], ++i == len, indent, true);
      }
      draw.push(tab + '}' + (isLast ? line : (',' + line)));
      /*缩进'}'换行,若非尾元素则添加逗号*/
    } else {
      if (typeof value == 'string') {
        value = '"' + value + '"';
      }
      draw.push(tab + (formObj ? ('"' + name + '":') : '') + value + (isLast ? '' : ',') + line);
    }
  };
  var isLast = true, indent = 0;
  notify('', data, isLast, indent, false);
  return draw.join('');
}

希望对你有帮助!

© 著作权归作者所有

ZYallers
粉丝 1
博文 59
码字总数 19100
作品 0
佛山
程序员
私信 提问
4个为 JS 开发者准备的 Notepad++ 插件

这里是一些为 JavaScript 开发者准备的 4 个 Notepad++ 的插件。 提示: 你可通过 Notepad++ 的插件管理器来安装插件: 下面是这四个插件: JSLint 描述: JSLint是一个JavaScript验证工具,可...

红薯
2012/04/04
36.3K
18
JS 引擎 V8 发布 7.6 版本,别问,问就提升性能

JavaScript 引擎 V8 发布了 7.6 版本,目前处于 beta 阶段,正式版将于几个星期后随 Chrome 76 Stable 一起发布。 此版本通过以下几个特性改进又提升了性能: 改进 JSON.parse 在现代 JavaSc...

h4cd
06/28
12.9K
81
给Jquery easyui 的datagrid 每行增加操作链接

  我们都知道Jquery的Easy-UI的datagrid可以添加并且自定义Toolbar,这样我们选择一行然后选择toolbar的相应按钮就可以对这行的数据进行操作。但实际项目里我们可能需要在每行后面加一些操...

Carl_
2015/11/13
987
0
AJAX 跨域请求 - JSONP获取JSON数据

原文地址:http://justcoding.iteye.com/blog/1366102 AJAX 跨域请求 - JSONP获取JSON数据 博客分类: Javascript /Jquery / Bootstrap / Web Asynchronous JavaScript and XML (Ajax ) 是驱......

water014300
2014/12/22
208
0
2017-05-10 日志

总结: 1.上午学习了一下json,主要内容是javascript的对象({key:value,key:value......})和数组(["",""......]),以及将json转换成文本字符串的方法:String myJSONtext = object.to......

善钰
2017/05/10
3
0

没有更多内容

加载失败,请刷新页面

加载更多

JavaScript权威指南笔记5

第五章、语句 0、概述 JS程序是一系列可执行语句的集合。 通过控制语句来改变语句的默认执行顺序。 控制语句:条件、循环和跳转(如return、break和throw) 2、复合语句 当多条语句被当做一条语...

_Somuns
3分钟前
0
0
vmware安装ubuntu18.04总是 panic -not syncing:corrupted stack end detected inside schedule

Vmware 安装ubuntu 总是卡着不动, 提示panic -not synciong 网上提示很多办法,都试了效果不佳, 找到了完美解决办法 你的兼容模式重新选一下为6.0,兼容性对硬件有要求的 即可实现 成功安装...

dragon_tech
11分钟前
1
0
centos7 安装 mysql5.7 版本(全)

centos 安装 版本说明 :centos7,mysql5.7 ,不是 centos7 可能有些命令不兼容 安装 mysql-server # 下载并安装 mysql yum wget -i -c http://dev.mysql.com/get/mysql57-community-relea......

sanri1993
40分钟前
4
0
Spring3.x升级到Spring4.x-5.x时关于MappingJacksonHttpMessageConverter的报错问题

在Spring4.x或者以上的版本强使用(不然会报错): org.springframework.http.converter.json.MappingJackson2HttpMessageConverter 如果是Spring4.0获者以下的版本可以使用MappingJacksonH...

code-ortaerc
43分钟前
4
0
OSG 渲染状态污染到其它节点怎么解决?

在根节点补上初始状态

洛克人杰洛
45分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部