前端js調用接口轉換Map數組數據

返回Map數據

1. 後端接口返回數據格式

{
    "code": 1,
    "msg": "操做成功!",
    "count": 0,
    "data": {"數量":0}
}

2. 前端js處理取值

var parentData = JSON.parse(JSON.stringify(res.data));
this.volume = parentData.容量總數;

返回list數組數據

1. 後端接口返回數據

{
    "code": 1,
    "msg": "操做成功!",
    "count": 0,
    "data": [
        {
            "數量": 132779
        }
    ]
}

2. 前端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"
        }
    ]

2. 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()轉換

2. JSON.stringify()是從一個對象中解析出字符串

var data={name:'數據JSON轉換'}
JSON.stringify(data)
結果是：'{"name":"數據JSON轉換"}'

獲取數據eval轉換

1. eval() 函數可計算某個字符串，並執行其中的的 JavaScript 代碼。

var value = eval("2+2");
//計算值等於4

2. 能夠用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);
}

js中遍歷Map對象

console.log(jsonData);//火狐控制檯打印輸出： Object { fileNumber="文件編號", fileName="文件名稱"}
for(var key in jsonData)
    console.log("屬性：" + key + ",值："+ jsonData[key]);
}
 
打印輸出：
    屬性：fileNumber, 值：文件編號
    屬性：fileName, 值：文件名稱

html循環List<Map<String, Object>>數組

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獲取如今時間

// 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;
// }