在前端将JSON数据格式化展示解决办法

我一个后台开发人员,要自己敲公司数据管理系统对应接口的前端部分。研究这前端问题好几个小时,结果写了这个函数解决了我的问题:

function JSON_Format(str) {
		//判空
        if (str == null) {
            return "查询结果为空";
        }
        //栈-用于括号匹配
        var stack = []; 
        //新格式化JSON字符串
        var tmpStr = '';    
        //原始JSON长度
        var len = str.length;   

        //遍历每一个字符
        for (let i = 0; i < len; i++) {

            //当遇到结构块起始结构
            if (str[i] == '{' || str[i] === '[') {

                //起始结构后面直接换行
                tmpStr += str[i] + "\n";

                //入栈
                stack.push(str[i]);

                //这里的意思是结构块起始的下一行开始就会有一个缩进,缩进量与遇到的结构块起始符个数成正比1:1
                tmpStr += "\t".repeat(stack.length);
            }
            //当遇到结构块结束符
            else if (str[i] == ']' || str[i] === '}') {

                //因为本身JSON格式是固定的,所以括号一定是成对的,这里先不考虑错误的json数据
                //遇到结束符就退栈,
                stack.pop();

                //结束符本身输出到下一行,并减少一个缩进
                tmpStr += "\n"+"\t".repeat(stack.length) + str[i];
            }
            //当遇到逗号的时候
            else if (str[i] == ',') {
                //逗号后方直接换行,以及下一行的缩进处理
                tmpStr += str[i] + "\n" + "\t".repeat(stack.length);
            }
            else {
                //其他字符直接复制
                tmpStr += str[i];
            }
        }
        return tmpStr;
    }

大家拿去用吧!!! 哈哈哈~

  • 3
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值