返回Map数据

后端接口返回数据格式

{

"code": 1,

"msg": "操作成功!",

"count": 0,

"data": {"数量":0}

}

前端js处理取值

var parentData = JSON.parse(JSON.stringify(res.data));

this.volume = parentData.容量总数;

返回list数组数据

后端接口返回数据

{

"code": 1,

"msg": "操作成功!",

"count": 0,

"data": [

{

"数量": 132779

}

]

}

前端js取值

var list = eval(res.data);

this.num = list[0].数量;

string转map的方法

js中string转map(对象或者数组对象)的方法 例如:

var r = "{'msg':'你好'}" ;

var map = eval("("+r+")"); //r为String类型的数据

var xx = map.msg; //此时 xx 的值为 你好

数组循环

parentData数据格式

{

"code": 1,

"msg": "操作成功!",

"count": 0,

"data": [

{

"morder": 1,

"img": "el-icon-adm-form",

"name": "检测分析",

"childList": [

{

"morder": 1,

"name": "检测分析体系",

"pid": 8,

"id": 9,

"url": "/target/target"

}

],

"pid": 0,

"id": 8,

"url": "/target"

},

{

"morder": 2,

"img": "el-icon-adm-project",

"name": "系统设置",

"pid": 0,

"id": 1,

"url": "/system"

}

]

js页面取值

var data1= parentData.map((item)=>{

return{

path:item.url!=null?item.url:'',

title:item.name!=null?item.name:'',

icon:item.img!=null?item.img:'',

children:item.childList.map((itemchild)=>{

return{

path:itemchild.url!=null?itemchild.url:'',

title:itemchild.name!=null?itemchild.name:''

}

})

}}

)

定义数组

var value1 = [];

var map1 = {name:item.单位,value:item.已采集覆盖且监测台区数}

value1.push(map1);

//返回数据

[{"name": "白银","value": 0 }]

向数组结尾添加元素

var arr = [1,2,3,4,5];

var arr2 = [];

arr.push(6);

arr[arr.length] = 6;

arr2 = arr.concat([6]);

获取数据JSON.parse()转换

JSON.parse()是从一个字符串中解析出json对象

//定义一个字符串

var data='{"name":"数据JSON转换"}'

//解析对象​

​JSON.parse(data)

结果是:​name:"数据JSON转换"

获取数据JSON.stringify()转换

JSON.stringify()是从一个对象中解析出字符串

var data={name:'数据JSON转换'}

JSON.stringify(data)

结果是:'{"name":"数据JSON转换"}'

获取数据eval转换

eval() 函数可计算某个字符串,并执行其中的的 JavaScript 代码。

var value = eval("2+2");

//计算值等于4

可以用eval把返回数据转换为list数组

if (res.code == 1) {

if (res.data != null) {

var list = eval(res.data);

this.total = list[0].总数;

} else {

this.total = 0;

}

}

后台传数组列表前端取值展示

后端传值 res.data

[{"用户数量":21,"注册数量":2}]

前端取值展示

//定义数据存储

var numsArr = {};

//获取数据转换

var list = eval(res.data);

//数据赋值

this.numsArr = list[0];

//vue页面展示

{{numsArr.用户数量}}

{{numsArr.注册数量}}

去除后台获取值的双引号“”

var reg = new RegExp('"',"g");

this.name = name.replace(reg, "")

前端传值JSON字符串后台接收

vue前端传值JSON

var testStr =[{"id":4,"name":"用户管理"}];

this.axios.post('/test/api/insert?testStr='+JSON.stringify(addlistTemp),{headers: {'Content-Type': 'application/json;charset=UTF-8'},}).then(res => {

if (res.code == 1) {

this.$message.success("操作成功");

}

}).catch(error => {

console.log(error);

});

后台转换

@RequestMapping(value = "insert")

public BasePageData insert(HttpServletRequest request,String testStr) {

BasePageData data = new BasePageData();

try {

List userList = JsonUtils.parseArray(testStr,User.class);

//往数据库中增加数据...

data.setCode(WebResponseCode.SUCCESS);

data.setMsg("操作成功!");

data.setData(userList);

}catch (Exception e){

e.printStackTrace();

data.setCode(WebResponseCode.FAIL);

data.setMsg("操作失败!");

}

return data;

}

//注:JsonUtils方法

public static final List parseArray(final String json, final Class clazz) {

return JSON.parseArray(json, clazz);

}

js中遍历Map对象

console.log(jsonData);//火狐控制台打印输出: Object { fileNumber="文件编号", fileName="文件名称"}

for(var key in jsonData)

console.log("属性:" + key + ",值:"+ jsonData[key]);

}

打印输出:

属性:fileNumber, 值:文件编号

属性:fileName, 值:文件名称

html循环List>数组

List> peopleTypeCountList = new ArrayList<>();

peopleCensusMap.peopleTypeCountList = [{唐老鸭=1}, {米老鼠=0}, {紫叶草=0}, {绿茶=0}]

0

残疾人

js获取现在时间

// var date = new Date()

// var startdate;

// var year = date.getFullYear();

// var month = date.getMonth() + 1;

// if (month < 10) {

// startdate = year + '0' + month;

// } else {

// startdate = year + '' + month;

// }

java集合转js数值_前端js调用接口转换Map数组数据相关推荐

  1. java 9宫格抽奖_前端js实现九宫格模式抽奖(多宫格抽奖)

    介绍: 前端九宫格是一种常见的抽奖方式,js实现如下,掌握其原理,不论多少宫格,都可以轻松应对.(代码可复制直接运行看效果). 该案例以四宫格入门,可扩展多宫格,奖品模块的布局可自由设置. 四宫格抽奖 ...

  2. ie9无法获取未定义或 null 引用的属性“indexof”_前端JS基础篇(二)JS基本数据类型和引用数据类型及检测数据类型方法...

    JS中的数据类型 (一).基本数据类型(值类型) 1.number:数字 -12.12.5.-12.5 0这些数字都是number: js中增加了一个number类型的数据:'NaN' typeof ...

  3. js增加属性_前端js基础2

    JavaScript ECMAScript(ES):规定了js的一些基础的核心知识(变量.数据类型.语法规范.操作语句等) 3/5==6/7 说出ES5和ES6的区别? DOM:document ob ...

  4. blob 图片_前端JS实现字符串/图片/excel文件下载

    编者按:本文转载自SF专栏,由作者 赵帅强 授权奇舞周刊转载 在web开发中,如果你想让用户下载或者导出一个文件,应该怎么做呢? 传统的做法是在后端存储或者即时生成一个文件来提供下载功能,这样的优势是 ...

  5. 前端js获取图片大小 扩展名_前端 JS 获取 Image 图像 宽高 尺寸

    前端 JS 获取 Image 图像 宽高 尺寸 简介 项目中用到获取图片的原始尺寸,然后适配宽高:网上的大部分前端解决方案,都是new Image()后,在onload事件中获取image的尺寸. 在 ...

  6. 【文件上传绕过】——前端检测_前端js验证漏洞

    文章目录 一.实验目的: 二.工具: 三.实验环境: 四.实验目的: 五.漏洞说明: 1. 漏洞原理: 2. `js前端验证`过程代码: 六.实验过程: 1. 判断是否存在前端`js绕过漏洞`: 1. ...

  7. 如何保护前端JS代码?前端js代码加密

    Web前端JS代码需要保护吗? 这得具体情况具体分析. 1.如果只是写一段web页面图片轮播,或是跑马灯效果等等之类简单的功能.那不需要保护. 2.如果是精心设计一个绚丽的特效,如果想要保护这段自己付 ...

  8. editer js 插件_各种Js插件汇总;JavaScript插件

    1.jquery信息提示插件: https://blog.csdn.net/u013517229/article/details/78291841 http://www.jqueryfuns.com/ ...

  9. 根据接口文档书写接口,并在前端调用接口返回显示出数据(加下载)

    ---恢复内容开始--- 1.首先来看接口文档(其中一个接口): 接口的编写: 1 /** 2 * 7.11 余额明细查询接口3 *4 *@paramtoken5 *@parampageNum6 * ...

最新文章

  1. Matlab中的算术运算和数学函数
  2. 1.1 MySQL OCP 实战环境准备
  3. vue项目实践教程3:中间大的五选项底部切换卡制作及相关问题解决
  4. java 调用枚举种方法_Java中枚举类型的一种使用方式
  5. 存储过程中while循环
  6. VS2003/VS2005 常用快捷键
  7. java 字符串排序_Java控制台输入字符串及字符串比较
  8. 深度 | 机器学习敲门砖:任何人都能看懂的TensorFlow介绍【转】
  9. php内置函数什么语言,语言构造和PHP中的“内置”函数有什么区别?
  10. 计算机固态硬盘作用,固态硬盘是什么及作用
  11. python图像坐标系_世界坐标系、相机坐标系和图像坐标系的转换(Python)
  12. 请求头显示Provisional headers are shown问题
  13. linux运行mentohust,Linux中用mentohust设置联网环境
  14. Gitee代码提交 自用
  15. Android 仿小米的全面屏手势-侧滑返回
  16. Y7000 2018版(I7-8650H 1050T)黑苹果安装攻略附带工具安装包
  17. 系统学习金融数据挖掘 之爬虫技术基础(附源代码)(网页结构基础)
  18. 复旦计算机学院 王曦,复旦大学计算机科学与工程系薛向阳老师介绍
  19. 7-13 sdut-C语言实验-各位数字之和排序
  20. 第十五章 使用PyQt进行Python图形界面程序开发

热门文章

  1. 用模糊查询like语句时如果要查是否包含%字符串该如何写
  2. Navicat for Mysql 新建查询提示文件找不到
  3. Swift应用案例 2.闭包入门到精通
  4. python Linux系统信息
  5. MONGOOSE – 让NODE.JS高效操作MONGODB(转载)
  6. 使用Ext JS,不要使用页面做组件重用,尽量不要做页面跳转
  7. ISA Server 2004防火墙的基本配置
  8. 我的世界基岩版json_(1.8.0.13+)我的世界Minecraft【BE】基岩版 /function 使用教程
  9. 信息学奥赛一本通(1110:查找特定的值)
  10. Balanced Lineup(POJ-3264)