📘
技术积累
  • 简介
  • 学习方法
    • 如何提高编程技能
  • 基础知识
    • Linux
      • Linux常用指令
      • rsync
      • VIM
      • tmate命令行分享
      • 命令别名存储
      • 项目服务器重启
    • 设计模式
    • 自动化接口使用
    • 项目经理培训
    • 报价策略
    • 培训材料撰写
  • 工具
    • Ajax
    • AutV
    • axios
    • Babel
    • bower
    • codecov
    • crypto
    • CSS3D
    • Docker
    • Echarts
    • Git
      • 如何删除项目
      • 多个ssh_key的生成与使用
      • 常用命令清单
    • Gitbook
      • Gitbook 更多配置
      • Markdown 标记示例
    • gulp
    • Istanbul
    • JEST
    • jMeter
    • js-md5
    • Kama
    • LESS Sass 编译工具Koala介绍
    • Lodash
    • Markdown
    • Maven
    • Moment
    • Nginx
    • NPM
    • NVM
    • particles.js粒子效果
    • PM2
    • Qs
    • Swagger
    • Webpack
    • Webpack
    • Yarn
    • Yeoman使用
  • 平台
    • 代码托管平台 GitLab
    • 代码安全平台 sonarqube
  • 语言和框架
    • 工作流
    • Angular
      • FUSE-Angular前端框架项目初始化
      • AngularJs-toaster-Angular提示弹框插件
      • ng-file-upload-Angular上传图片插件
      • ngclipboard-Angular复制到剪贴板插件
    • Vue
      • ElementUI-Vue前端框架项目初始化
      • clipboard使用
      • mobileSelect.js使用
      • vue-cookies使用
      • vue-fullpage使用
      • vue-router使用
      • Vue的Ref属性
      • Vuex使用
      • Vux使用
      • vux-uploader使用
      • Vue生命周期图例
      • iview-loader使用
    • cycleJs
    • ES6
      • async/await
    • react
      • react生命周期
      • create-react-app
      • Rematch
      • react-router
      • react-router-dom
      • css-in-js
    • TypeScript
      • VueAndTypeScript
    • 微信小程序
    • Hexo博客框架
      • Hexo博客框架-图片问题处理
      • Hexo博客框架-切换主题
    • SmartClient
    • HybridApp混合开发
      • uniapp
  • 代码审查
    • 代码命名规范
    • 页面代码结构
    • JavaScript标准编码风格
    • AirbnbJavaScript风格指南
  • 其他
    • 收藏|激发灵感的33套网页配色方案(附色值)
    • KPI&OKR
    • 测试自动化
    • view
    • 前端面试
      • 项目方面
      • html+css
      • JavaScript方面
      • JavaScript面试
      • 框架方面
      • 前端面试3+1
        • 20190420
        • 20190419
        • 20190418
        • 20190417
    • Linux面试题
    • JAVA面试
    • 测试面试
    • 钉钉使用
    • sd360
  • 前端知识积累
    • css3单位汇总
    • CSS解决loading效果
    • 深度克隆的方法
    • 加密技术
    • 解决ios下的微信页面背景音乐无法自动播放问题
    • 一套绝佳的图标字体库和CSS框架:Font Awesome
    • 关于ico图标不显示解决办法
    • 提升页面响应速度
    • innerHTML引入的script如何使用
    • JavaMap转Json
    • JS开发工具大全
    • 移动端插件
    • 移动端页面通过前端方法禁止ios页面横屏方法
    • 图片资源网站
    • 排序方式
    • 图片预览上传
    • Windows部署时脚本报错
Powered by GitBook
On this page
  • 作者:高天阳
  • 邮箱:13683265113@163.com
  • 1 问题描述
  • 2 解决方案
  • 参考资料

Was this helpful?

  1. 前端知识积累

JavaMap转Json

作者:高天阳

邮箱:13683265113@163.com

更改历史

* 2018-8-14      高天阳    初始化文档

1 问题描述

在前后端交互中,后台可能由于某种原因,会返回map类型的数据,因此,前端的开发中,需要解析成标准的JSON的格式来使用

2 解决方案

公共方法js

const commonApi = {};
/**
 * map转json通用方法
 * @param map
 */
commonApi.mapToJson= function(map){
    var mapData = '';
    var mapDataBak = '';
    var data = [];
    /**
     * 测试数据开始
     */
    // var DATA = [
    //     '[{forPI=91.67, realRepayDate=2017-12-19, id=4}]',
    //     '[{forPI=91.67, realRepayDate=2017-12-19, id=4},{forPI=81.88, realRepayDate=2018-12-18, id=3}]',
    //     '[{forPI=91.67, realRepayDate=2017-12-19, id=4}, {forPI=81.88, realRepayDate=2018-12-18, id=3}]',
    //     '{forPI=91.67, realRepayDate=2017-12-19, id=4}',
    //     '[{forPI=91.67, realRepayDate=2017-12-19, id=4, nameData=[{name=jack},{name=tom}]}]',
    //     '[{forPI=91.67, realRepayDate=2017-12-19, id=4, nameData=[{name=jack},{name=tom}]}, {forPI=81.88, realRepayDate=2018-12-18, id=3, nameData=[{name=mark},{name=lara}]}]',
    //     '{forPI=91.67, realRepayDate=2017-12-19, id=4, nameData=[{name=jack},{name=tom}]}'
    // ];
    // map=DATA[0];
    /**
     * 测试数据结束
     */
    if(map.match(/^\[[\s\S]*\]$/)&&map.match(/^\[[\s\S]*\]$/).index===0&&map.match(/^\[[\s\S]*\]$/).length===1){
        if(map.match(/\[[\s\S]*\[/)&&map.match(/\[[\s\S]*\[/).length>=1){
            console.error('javaMap存在"[[]]"嵌套,无法使用此方法转json!');
            return
        }
        mapData = map;
        if(map.match(/}, {/)&&map.match(/}, {/).length){
            /**
             * 去除'[]' 并按'}, {'分割
             * @type {string[]}
             */
            mapDataBak = mapData.replace(/[\[\]]/g,"").split("}, {");
        }else if(map.match(/},{/)&&map.match(/},{/).length){
            mapDataBak = mapData.replace(/[\[\]]/g,"").split("},{");
        }else{
            mapDataBak = [mapData.replace(/[\[\]]/g,"")];
        }
        _.each(mapDataBak,function (v,k) {
            if(mapDataBak.length===1){
                return
            }
            else if(k===0){
                mapDataBak[k] = v + '}';
            }else if(k===mapDataBak.length-1){
                mapDataBak[k] = '{' + v;
            }else{
                mapDataBak[k] = '{' + v + '}';
            }
        });
        _.each(mapDataBak,function (v) {
            data.push(commonApi.formatJsonMap(v));
        });
        return data;
    }else if(map.match(/^\{[\s\S]*\}$/)&&map.match(/^\{[\s\S]*\}$/).index===0&&map.match(/^\{[\s\S]*\}$/).length===1){
        if(map.match(/\[[\s\S]*\]/)&&map.match(/\[[\s\S]*\]/).length>=1){
            console.error('javaMap存在"{[]}"嵌套,无法使用此方法转json!');
            return
        }
        mapData = map;
        mapDataBak = mapData;
        data.push(commonApi.formatJsonMap(map));
        return data;
    }else{
        console.error('javaMap结构异常,无法使用此方法转json!');
    }
};

commonApi.formatJsonMap = function(obj){
    /**
     * 分析:将字符串中的{}去除,变成基本的字符串,然后使用正则的方法将map转成标准的json个数
     * \s匹配任何不可见字符,包括空格、制表符、换页符等等。等价于[ \f\n\r\t\v]
     * @type {}
     */
    var json={};
    var newObj= obj.substring(1,obj.length-1);
    var reg = /([^,\s]+)=([^,\s]+)/g;               //等号的两边是:非,\s的多个字符
    newObj.replace(reg,function(arg0,arg1,arg2){    // arg1第一个分组,arg2第二个分组
        json[arg1] = arg2
    });
    return json;
};

调用方法页面

<script type="text/javascript" src="XX/XX/commonApi.js"></script>
<script>
    console.log(commonApi.mapToJson('${pageBean.page}'));
</script>
  • ${pageBean.page}为javaMap

参考资料

PreviousinnerHTML引入的script如何使用NextJS开发工具大全

Last updated 4 years ago

Was this helpful?

后台返回的map转成json的形式