美文网首页
对于UI上JSON校验、数据格式化输出、JSON转换

对于UI上JSON校验、数据格式化输出、JSON转换

作者: 前端小慵卿 | 来源:发表于2019-11-20 12:29 被阅读0次

    JSON格式化

    对于UI上input或者textarea,根据不同的需求或者说要求实现不同的展示效果。对此,如若user输入的是一个不整洁的JSON对象,在UI上做展示或者将数据传给后台同学,未经处理修饰的JSON是一团糟。
    对此,做一下处理


    有空格、换行符
    1.去掉所有空格" "和换行符(前两个replace是为了去掉所有空格,第三个是去掉换行符)
    str.replace(/\r/ig, "").replace(/\n/ig, "").replace(/\s/g,"")
    
    2.根据后台接口的要求
    (1)json对象
        string转json
        JSON.parse(str)
    (2)string
        1.如自身是string,可以直接传值,不用转换
        2.json转string
        JSON.stringify(json串)
    
    处理前显示

    在传给后台的JSON没有处理直接转成string的话,如上显示。
    若按照格式化展示,如下


    处理后显示
    情况1.直接显示在div中,可以使用<pre>标签
          并且结合JSON.stringify(data, null, 4)
    情况2.在textarea中显示做Update,可以使用函数方法在js中处理
      getFormatJsonStrFromString(jsonStr){ //UI展示格式化JSON数据
        let res="";
        if(jsonStr){
          for(let i=0,j=0,k=0,ii,ele;i<jsonStr.length;i++) {//k:缩进,j:""个数
            ele=jsonStr.charAt(i);
            if(j%2==0&&ele=="}") {
              k--;
              for(ii=0;ii<k;ii++) ele="    "+ele;
              ele="\n"+ele;
            } else if(j%2==0&&ele=="{") {
              ele+="\n";
              k++;
              for(ii=0;ii<k;ii++) ele+="    ";
            } else if(j%2==0&&ele==",") {
              ele+="\n";
              for(ii=0;ii<k;ii++) ele+="    ";
            } else if(ele=="\"") j++;
            res+=ele;
          }
          // console.log(res);
          return res;
        }
      }
    
    

    JSON校验

    isJSON(str) { //验证输入JSON格式正确
       //console.log(str);
       if (typeof str == 'string') {
         try {
           let obj=JSON.parse(str);
           //console.log(obj);
           if(obj && typeof obj == 'object'  ){
            // console.log('true');
             return true;
           }else{
            // console.log('false');
             return false;
           }
         } catch(e) {
           return false;
         }
       }
     }
    

    相关文章

      网友评论

          本文标题:对于UI上JSON校验、数据格式化输出、JSON转换

          本文链接:https://www.haomeiwen.com/subject/riqoictx.html