前端基础之《JavaScript（7）—json数据处理》

一、页面获取后台返回的数据

1、后端返回方式
返回json字符串（或者字符串数组），放到属性里面

	@RequiresPermissions("techServiceForm:view")
	@RequestMapping("/toRecordWork")
	public String toRecordWork(Long techServiceFormId, Model model) {
		List<RecordWork> recordWorks = recordWorkService.selectByTsfd(techServiceFormId);
		model.addAttribute("recordWorks", JSONObject.toJSONString(recordWorks)); //传json格式
		TechServiceForm techServiceForm = techServiceFormService.findOne(techServiceFormId);
		model.addAttribute("techServiceForm", techServiceForm);
		return viewName("recordWorkSubmit");
	}

2、在页面设置隐藏输入框，获取后台的值，再取出来

<input type="hidden" id="recordWorks" name="recordWorks" value="${recordWorks}"/>

3、直接取后台返回的属性

var json = ${recordWorks};  //都是object数组对象

二、javascript中json转换

1、JSON.stringify()
方法将某个JavaScript对象转换成JSON字符串形式

2、JSON.parse()
用于将一个JSON字符串转换为JavaScript对象

3、例子

<script>
	var obj=[{"aid":16,"id":16,"new":false,"serviceno":"P32022072802","tsfid":1543,"userName":"张","workDate":"2022-10-29","workTime":"3","workType":"技术开发"},{"aid":15,"id":15,"new":false,"serviceno":"P32022072802","tsfid":1543,"userName":"测试用户1","workDate":"2022-10-27","workTime":"4","workType":"技术开发"},{"aid":14,"id":14,"new":false,"serviceno":"P32022072802","tsfid":1543,"userName":"测试用户1","workDate":"2022-10-19","workTime":"2","workType":"技术开发"},{"aid":13,"id":13,"new":false,"serviceno":"P32022072802","tsfid":1543,"userName":"孙宇","workDate":"2022-10-17","workTime":"4","workType":"技术开发"},{"aid":1,"id":1,"new":false,"serviceno":"P32022072802","tsfid":1543,"userName":"张三","workDate":"2022-10-16","workTime":"1.5","workType":"技术开发"},{"aid":2,"id":2,"new":false,"serviceno":"P32022072802","tsfid":1543,"userName":"123","workDate":"2022-10-16","workTime":"666","workType":"技术开发"},{"aid":3,"id":3,"new":false,"serviceno":"P32022072802","tsfid":1543,"userName":"123","workDate":"2022-10-16","workTime":"666","workType":"技术开发"},{"aid":5,"id":5,"new":false,"serviceno":"P32022072802","tsfid":1543,"userName":"admin","workDate":"2022-10-16","workTime":"2","workType":"技术开发"},{"aid":6,"id":6,"new":false,"serviceno":"P32022072802","tsfid":1543,"userName":"admin","workDate":"2022-10-16","workTime":"2","workType":"技术开发"},{"aid":7,"id":7,"new":false,"serviceno":"P32022072802","tsfid":1543,"userName":"admin","workDate":"2022-10-16","workTime":"2","workType":"技术开发"},{"aid":8,"id":8,"new":false,"serviceno":"P32022072802","tsfid":1543,"userName":"admin","workDate":"2022-10-16","workTime":"2","workType":"技术开发"},{"aid":9,"id":9,"new":false,"serviceno":"P32022072802","tsfid":1543,"userName":"123","workDate":"2022-10-16","workTime":"2","workType":"技术开发"},{"aid":10,"id":10,"new":false,"serviceno":"P32022072802","tsfid":1543,"userName":"123","workDate":"2022-10-16","workTime":"2","workType":"技术开发"},{"aid":11,"id":11,"new":false,"serviceno":"P32022072802","tsfid":1543,"userName":"q","workDate":"2022-10-16","workTime":"2","workType":"技术开发"},{"aid":12,"id":12,"new":false,"serviceno":"P32022072802","tsfid":1543,"userName":"张三","workDate":"2022-10-16","workTime":"2","workType":"技术开发"},{"aid":4,"id":4,"new":false,"serviceno":"P32022072802","tsfid":1543,"userName":"张三","workDate":"2022-10-05","workTime":"1.5","workType":"技术开发"}]
	alert(obj);
	alert(obj.length);
    //把对象转成json字符串
	var arrays = JSON.stringify(obj);
	alert(arrays);
</script>

弹出窗口：

 

三、遍历json数组

javascript可以遍历json对象，所以json字符串一定要转成json对象才行，例子：

function table() {
		var tbody = $("#show tbody");
		var json = ${recordWorks};  //都是object数组对象
		
		for (var i=0;i<json.length;i++){
			var $tr = $("<tr>"+
	                "<td>"+json[i].workDate+"</td>"+
	                "<td>"+json[i].userName+"</td>"+
	                "<td>"+json[i].workType+"</td>"+
	                "<td>"+json[i].workTime+"</td>"+
	                "</tr>");
		tbody.append($tr);
}

参考资料：
https://blog.youkuaiyun.com/kathiegoodlucky/article/details/109175615
https://blog.youkuaiyun.com/qq_43557395/article/details/121351084​​​​​​​