Return Map data
- Backend interface returns data format
{
"code": 1,
"msg": "操作成功!",
"count": 0,
"data": {"数量":0}
}
- Front-end js processing value
var parentData = JSON.parse(JSON.stringify(res.data));
this.volume = parentData.容量总数;
return list array data
- Backend interface returns data
{
"code": 1,
"msg": "操作成功!",
"count": 0,
"data": [
{
"数量": 132779
}
]
}
- Front-end js value
var list = eval(res.data);
this.num = list[0].数量;
String to map method
- The method of string to map (object or array object) in js is for example:
var r = "{'msg':'你好'}" ;
var map = eval("("+r+")"); //r为String类型的数据
var xx = map.msg; //此时 xx 的值为 你好
array loop
- parentData data format
{
"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 page value
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:''
}
})
}}
)
define array
var value1 = [];
var map1 = {name:item.单位,value:item.已采集覆盖且监测台区数}
value1.push(map1);
//返回数据
[{"name": "白银","value": 0 }]
add an element to the end of the array
var arr = [1,2,3,4,5];
var arr2 = [];
arr.push(6);
arr[arr.length] = 6;
arr2 = arr.concat([6]);
Get data JSON.parse() conversion
- JSON.parse() is to parse a json object from a string
//定义一个字符串
var data='{"name":"数据JSON转换"}'
//解析对象
JSON.parse(data)
结果是:name:"数据JSON转换"
Get data JSON.stringify() conversion
- JSON.stringify() parses a string from an object
var data={name:'数据JSON转换'}
JSON.stringify(data)
结果是:'{"name":"数据JSON转换"}'
get data eval transformation
- The eval() function evaluates a string and executes the JavaScript code within it.
var value = eval("2+2");
//计算值等于4
- You can use eval to convert the returned data to a list array
if (res.code == 1) {
if (res.data != null) {
var list = eval(res.data);
this.total = list[0].总数;
} else {
this.total = 0;
}
}
Back-end transfer array list front-end value display
Backend value res.data
[{"用户数量":21,"注册数量":2}]
Front-end value display
//定义数据存储
var numsArr = {};
//获取数据转换
var list = eval(res.data);
//数据赋值
this.numsArr = list[0];
//vue页面展示
{{numsArr.用户数量}}
{{numsArr.注册数量}}
Remove the double quotes "" from the value obtained in the background
var reg = new RegExp('"',"g");
this.name = name.replace(reg, "")
Front-end value JSON string received in the background
Vue front-end pass value 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);
});
background conversion
@RequestMapping(value = "insert")
public BasePageData insert(HttpServletRequest request,String testStr) {
BasePageData data = new BasePageData();
try {
List<User> 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 <T> List<T> parseArray(final String json, final Class<T> clazz) {
return JSON.parseArray(json, clazz);
}
Traversing Map objects in js
console.log(jsonData);//火狐控制台打印输出: Object { fileNumber="文件编号", fileName="文件名称"}
for(var key in jsonData)
console.log("属性:" + key + ",值:"+ jsonData[key]);
}
打印输出:
属性:fileNumber, 值:文件编号
属性:fileName, 值:文件名称
html loop List<Map<String, Object>> array
List<Map<String, Object>> peopleTypeCountList = new ArrayList<>();
peopleCensusMap.peopleTypeCountList = [{唐老鸭=1}, {米老鼠=0}, {紫叶草=0}, {绿茶=0}]
<li th:each="peopleTypeMap:${peopleCensusMap.peopleTypeCountList}">
<div th:each="item,peopleType:${peopleTypeMap}">
<span class="yrpic"></span><p th:text="${peopleType.current.value}">0</p><p th:text="${peopleType.current.key}">残疾人</p>
</div>
</li>
js get the current time
// 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;
// }
{{o.name}}
{{m.name}}