前端js调用接口转换Map数组数据

原创
08/17 16:02
阅读数 1.9K

返回Map数据

  1. 后端接口返回数据格式
{
    "code": 1,
    "msg": "操作成功!",
    "count": 0,
    "data": {"数量":0}
}
  1. 前端js处理取值
var parentData = JSON.parse(JSON.stringify(res.data));
this.volume = parentData.容量总数;

返回list数组数据

  1. 后端接口返回数据
{
    "code": 1,
    "msg": "操作成功!",
    "count": 0,
    "data": [
        {
            "数量": 132779
        }
    ]
}
  1. 前端js取值
var list = eval(res.data);
this.num = list[0].数量;

string转map的方法

  1. js中string转map(对象或者数组对象)的方法 例如:
var  r = "{'msg':'你好'}" ;
var map = eval("("+r+")"); //r为String类型的数据
var xx = map.msg;  //此时 xx 的值为 你好

数组循环

  1. 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"
        }
    ]
  1. 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()转换

  1. JSON.parse()是从一个字符串中解析出json对象
	//定义一个字符串
	var data='{"name":"数据JSON转换"}'
	//解析对象​
	​JSON.parse(data)
	结果是:​name:"数据JSON转换"

获取数据JSON.stringify()转换

  1. JSON.stringify()是从一个对象中解析出字符串
var data={name:'数据JSON转换'}
JSON.stringify(data)
结果是:'{"name":"数据JSON转换"}'

获取数据eval转换

  1. eval() 函数可计算某个字符串,并执行其中的的 JavaScript 代码。
var value = eval("2+2");
//计算值等于4
  1. 可以用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<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);
}
展开阅读全文
打赏
0
1 收藏
分享
加载中
麦漁翁博主
此文章功能点持续增加
09/01 18:49
回复
举报
前端叫对象跟数组对象,前端可没有map 类型
08/24 11:56
回复
举报
麦漁翁博主
好的、前端不太熟悉,这样叫容易记住一些
08/24 15:43
回复
举报
更多评论
打赏
3 评论
1 收藏
0
分享
返回顶部
顶部