JS格式化数据

news/2024/7/19 16:43:42 标签: JS, JavaScript, 数据格式化

前端经常遇到要处理后台返回的JSON数据,并且希望能够按照一定格式进行展示,便于读者查看.此方法便可以进行操作

let txt='[{"sender":"tuser1","agentid":"155889886","ip":"*"},
          {"sender":"tuser2","agentid":"166933213","ip":"*"}
          ]'
 fomatJson=(txt,false)=>{//数据json格式化 ------------------txt即为json数据
     console.log('数据进入! ');  
          var indentChar = '    ';   
        if(/^\s*$/.test(txt)){   
            console.log('数据为空,无法格式化! ');  
               this.setState({
                 errmsg:"数据为空,无法格式化!",
                  goGame:false,
             }) 
            return;   
        }   
        try{
          var data=eval('('+txt+')');
             this.setState({
                 errmsg:"",
                 goGame:true,
             }) 
      }   
        catch(e){   
              this.setState({
                 errmsg:"数据格式错误,请仔细检查!",
                  goGame:false,
             }) 
            console.log('数据源语法错误,格式化失败! 错误信息: '+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); 
        console.log("显示的文字",draw,draw.join('')) 
        }

展示结果:
展示结果


http://www.niftyadmin.cn/n/1409505.html

相关文章

web3.eth.getBlockTransactionCount

2019独角兽企业重金招聘Python工程师标准>>> 如果你希望马上开始学习以太坊DApp开发&#xff0c;可以访问汇智网提供的出色的在线互动教程&#xff1a; 以太坊DApp实战入门教程以太坊去中心化电商应用开发实战返回指定区块的交易数量。 调用&#xff1a; web3.eth.g…

java内存泄露

测试类&#xff1a; Element.java [java] view plaincopy package com.memoryleak.demo; public class Element { private byte[] data; public Element(int size){ this.data new byte[size]; } } LeakStack.java[java] vie…

pythonwx功能_python中wx模块的具体使用方法

wx包中的方法都是以大写字母开头的&#xff0c;而这和Python的习惯是相反的。 本节介绍如何创建python程序的图形用户界面&#xff08;GUI&#xff09;&#xff0c;也就是那些带有按钮和文本框的窗口。这里介绍wxPython&#xff1a; 下载地址&#xff1a;http://www.wxpython.o…

CSS左边宽度固定,右边自适应或者上面宽度固定,下面宽度自适应 ---------calc()方法

自己对css3不是很熟悉,之前竟然没有发现css里面也有类似js的计算高度的方法,今天偶然机会看到,特记录下来,涨涨记性 #div1 {width: calc(100% - 300px);//加入左边为300,右边div1则为100%-300px} 主要用于自适应屏幕宽度高度的一些要求,一句话搞定

记一次docker问题定位(perf,iostat等性能分析)

背景 最近参与的项目是基于 OpenStack 提供容器管理能力&#xff0c;丰富公司 IaaS 平台的能力。日常主要工作就是在开源的 novadocker 项目&#xff08;开源社区已停止开发&#xff09;基础上进行增强&#xff0c;与公司的其他业务组件进行对接等。 周末给下游部门的 IaaS …

积极主动的步骤

不要被信条所惑&#xff0c;盲从信条是活在别人的生活里。不要让任何人的意见淹没了你内在的心声。 积极主动的步骤&#xff1a;拥有积极的态度&#xff0c;乐观面对人生→远离被动的习惯&#xff0c;从小事做起&#xff08;不要盲目听信人言&#xff0c;应冷静辨析&#xff0c…

通过图注意力神经网络进行多智能体游戏抽象_神经科学启发人工智能

来源http://dx.doi.org/10.1016/j.neuron.2017.06.011在历史上神经科学与人工智能这两个领域一直不断交流&#xff0c;然而近期两个领域的交流与合作愈发少见。实际上&#xff0c;理解生物大脑原理和机制可以更好地构建人工智能。本文总览了历史上AI与神经科学领域的联系&#…

Vue数据发生变化,视图层不更新

先是在数据中添加了一个字段,结果发现每次更改字段值,值发生变化,但是视图层却不更新 this.AllRoleList.forEach(function(item,index){item["check"]false}) 其实发现这样写不会被监听到 应该使用set方法赋值 this.AllRoleList.forEach(function(item,index){Vue.se…