JavaScript中 JSON序列化{} [] parse() stringify的爬坑之路

最新推荐文章于 2024-04-30 15:37:58 发布

Three_ST

最新推荐文章于 2024-04-30 15:37:58 发布

阅读量325

点赞数

文章标签： web json javascript

本文链接：https://blog.csdn.net/qq_25482087/article/details/89331511

版权

最近在项目中遇到了一个参数传递后的数据解析问题：

在web页面中通过props传递一个对象OK，但是传递数组时就出现了问题，测试了很久，期间使用了JSON的stringify()和object。assign()方法，出来的方法就是有问题，结果不断尝试对比发现是数据序列化的问题，VUE的props直接传递的是对象，但是在layui中传递的对象变成了一个string，可能和我传递的方法有关系。特此记录一下JavaScript中JSON的有关内容：

我的序列化内容：

{
	"type": "sl",
	"from": "1555031710506",
	"to": "1555031724346",
	"id": "1555032525714",
	"name": "",
	"Compares": [{
		"FieldName": "data_5,data_6",
		"Operation": "=",
		"Value": "是"
	}, {
		"FieldName": "data_7,data_8",
		"Operation": "=",
		"Value": "否"
	}],
	"marked": false,
	"dash": false,
	"LineCode": "1555032525714",
	"LineName": "",
	"LineFrom": "1555031710506",
	"LineTo": "1555031724346",
	"LineRejectType": "sl"
}

但是在解析过程中由于我在传递过程中声明为var,而不是object，导致前端页面使用v-for 解析出来为string类型，而不是object类型。

{"type":"sl","from":"1555031710506","to":"1555031724346","id":"1555032525714","name":"","Compares":[{"FieldName":"data_5,data_6","Operation":"=","Value":"是"},{"FieldName":"data_7,data_8","Operation":"=","Value":"否"}],"marked":false,"dash":false,"LineCode":"1555032525714","LineName":"","LineFrom":"1555031710506","LineTo":"1555031724346","LineRejectType":"sl"}

当数据为一个对象数组时，解析出来的数据会更多，导致v-for失败

[{"name":"data_1","type":"text","title":"deviceName（设备名称）","value":"","leipiplugins":"text","orghide":"0","orgalign":"left","orgwidth":"150","orgtype":"text","style":"text-align: left; width: 150px;","content":"<input name=\"data_1\" type=\"text\" title=\"deviceName（设备名称）\" value=\"\" leipiplugins=\"text\" orghide=\"0\" orgalign=\"left\" orgwidth=\"150\" orgtype=\"text\" style=\"text-align: left; width: 150px;\"/>"},
{"name":"data_2","type":"text","title":"deviceNum（设备编号）","value":"","leipiplugins":"text","orghide":"0","orgalign":"left","orgwidth":"150","orgtype":"text","style":"text-align: left; width: 150px;","content":"<input name=\"data_2\" type=\"text\" title=\"deviceNum（设备编号）\" value=\"\" leipiplugins=\"text\" orghide=\"0\" orgalign=\"left\" orgwidth=\"150\" orgtype=\"text\" style=\"text-align: left; width: 150px;\"/>"},
{"name":"data_3","type":"text","title":"deviceType(设备类型)","value":"","leipiplugins":"text","orghide":"0","orgalign":"left","orgwidth":"150","orgtype":"text","style":"text-align: left; width: 150px;","content":"<input name=\"data_3\" type=\"text\" title=\"deviceType(设备类型)\" value=\"\" leipiplugins=\"text\" orghide=\"0\" orgalign=\"left\" orgwidth=\"150\" orgtype=\"text\" style=\"text-align: left; width: 150px;\"/>"},
{"leipiplugins":"select","name":"data_4","title":"ErrorType","size":"1","orgwidth":"150","style":"width: 150px;","value":"机械系统故障,电气系统故障,气路系统故障","content":"<span leipiplugins=\"select\"><select name=\"data_4\" title=\"ErrorType\" leipiplugins=\"select\" size=\"1\" orgwidth=\"150\" style=\"width: 150px;\"><option value=\"机械系统故障\">机械系统故障</option><option value=\"电气系统故障\">电气系统故障</option><option value=\"气路系统故障\">气路系统故障</option></select>&nbsp;&nbsp;</span>"},
{"leipiplugins":"checkboxs","title":"IsRepairable（是否可维修）","parse_name":"checkboxs_0","name":"data_5,data_6","value":"是,否","content":"<span leipiplugins=\"checkboxs\"  title=\"IsRepairable（是否可维修）\"><input type=\"checkbox\" name=\"data_5\" value=\"是\"  />是&nbsp;<input type=\"checkbox\" name=\"data_6\" value=\"否\"  />否&nbsp;</span>","options":[{"name":"data_5","value":"是","type":"checkbox"},{"name":"data_6","value":"否","type":"checkbox"}]},
{"leipiplugins":"checkboxs","title":"ExternalBuy","parse_name":"checkboxs_1","name":"data_7,data_8","value":"是,否","content":"<span leipiplugins=\"checkboxs\"  title=\"ExternalBuy\"><input type=\"checkbox\" name=\"data_7\" value=\"是\"  />是&nbsp;<input type=\"checkbox\" name=\"data_8\" value=\"否\"  />否&nbsp;</span>","options":[{"name":"data_7","value":"是","type":"checkbox"},{"name":"data_8","value":"否","type":"checkbox"}]},
{"leipiplugins":"checkboxs","title":"Repaired","parse_name":"checkboxs_2","name":"data_9,data_10","value":"是,否","content":"<span leipiplugins=\"checkboxs\"  title=\"Repaired\"><input type=\"checkbox\" name=\"data_9\" value=\"是\"  />是&nbsp;<input type=\"checkbox\" name=\"data_10\" value=\"否\"  />否&nbsp;</span>","options":[{"name":"data_9","value":"是","type":"checkbox"},{"name":"data_10","value":"否","type":"checkbox"}]},
{"title":"appendix","name":"data_11","leipiplugins":"textarea","value":"","orgrich":"0","orgfontsize":"","orgwidth":"300","orgheight":"80","style":"width:300px;height:80px;","content":"<textarea title=\"appendix\" name=\"data_11\" leipiplugins=\"textarea\" value=\"\" orgrich=\"0\" orgfontsize=\"\" orgwidth=\"300\" orgheight=\"80\" style=\"width:300px;height:80px;\"></textarea>"}]

1.使用json.parse()后解析为object对象

[{
		"name": "data_1",
		"type": "text",
		"title": "deviceName（设备名称）",
		"value": "",
		"leipiplugins": "text",
		"orghide": "0",
		"orgalign": "left",
		"orgwidth": "150",
		"orgtype": "text",
		"style": "text-align: left; width: 150px;",
		"content": "<input name=\"data_1\" type=\"text\" title=\"deviceName（设备名称）\" value=\"\" leipiplugins=\"text\" orghide=\"0\" orgalign=\"left\" orgwidth=\"150\" orgtype=\"text\" style=\"text-align: left; width: 150px;\"/>"
	},
	{
		"name": "data_2",
		"type": "text",
		"title": "deviceNum（设备编号）",
		"value": "",
		"leipiplugins": "text",
		"orghide": "0",
		"orgalign": "left",
		"orgwidth": "150",
		"orgtype": "text",
		"style": "text-align: left; width: 150px;",
		"content": "<input name=\"data_2\" type=\"text\" title=\"deviceNum（设备编号）\" value=\"\" leipiplugins=\"text\" orghide=\"0\" orgalign=\"left\" orgwidth=\"150\" orgtype=\"text\" style=\"text-align: left; width: 150px;\"/>"
	},
	{
		"name": "data_3",
		"type": "text",
		"title": "deviceType(设备类型)",
		"value": "",
		"leipiplugins": "text",
		"orghide": "0",
		"orgalign": "left",
		"orgwidth": "150",
		"orgtype": "text",
		"style": "text-align: left; width: 150px;",
		"content": "<input name=\"data_3\" type=\"text\" title=\"deviceType(设备类型)\" value=\"\" leipiplugins=\"text\" orghide=\"0\" orgalign=\"left\" orgwidth=\"150\" orgtype=\"text\" style=\"text-align: left; width: 150px;\"/>"
	},
	{
		"leipiplugins": "select",
		"name": "data_4",
		"title": "ErrorType",
		"size": "1",
		"orgwidth": "150",
		"style": "width: 150px;",
		"value": "机械系统故障,电气系统故障,气路系统故障",
		"content": "<span leipiplugins=\"select\"><select name=\"data_4\" title=\"ErrorType\" leipiplugins=\"select\" size=\"1\" orgwidth=\"150\" style=\"width: 150px;\"><option value=\"机械系统故障\">机械系统故障</option><option value=\"电气系统故障\">电气系统故障</option><option value=\"气路系统故障\">气路系统故障</option></select>&nbsp;&nbsp;</span>"
	},
	{
		"leipiplugins": "checkboxs",
		"title": "IsRepairable（是否可维修）",
		"parse_name": "checkboxs_0",
		"name": "data_5,data_6",
		"value": "是,否",
		"content": "<span leipiplugins=\"checkboxs\"  title=\"IsRepairable（是否可维修）\"><input type=\"checkbox\" name=\"data_5\" value=\"是\"  />是&nbsp;<input type=\"checkbox\" name=\"data_6\" value=\"否\"  />否&nbsp;</span>",
		"options": [{
			"name": "data_5",
			"value": "是",
			"type": "checkbox"
		}, {
			"name": "data_6",
			"value": "否",
			"type": "checkbox"
		}]
	},
	{
		"leipiplugins": "checkboxs",
		"title": "ExternalBuy",
		"parse_name": "checkboxs_1",
		"name": "data_7,data_8",
		"value": "是,否",
		"content": "<span leipiplugins=\"checkboxs\"  title=\"ExternalBuy\"><input type=\"checkbox\" name=\"data_7\" value=\"是\"  />是&nbsp;<input type=\"checkbox\" name=\"data_8\" value=\"否\"  />否&nbsp;</span>",
		"options": [{
			"name": "data_7",
			"value": "是",
			"type": "checkbox"
		}, {
			"name": "data_8",
			"value": "否",
			"type": "checkbox"
		}]
	},
	{
		"leipiplugins": "checkboxs",
		"title": "Repaired",
		"parse_name": "checkboxs_2",
		"name": "data_9,data_10",
		"value": "是,否",
		"content": "<span leipiplugins=\"checkboxs\"  title=\"Repaired\"><input type=\"checkbox\" name=\"data_9\" value=\"是\"  />是&nbsp;<input type=\"checkbox\" name=\"data_10\" value=\"否\"  />否&nbsp;</span>",
		"options": [{
			"name": "data_9",
			"value": "是",
			"type": "checkbox"
		}, {
			"name": "data_10",
			"value": "否",
			"type": "checkbox"
		}]
	},
	{
		"title": "appendix",
		"name": "data_11",
		"leipiplugins": "textarea",
		"value": "",
		"orgrich": "0",
		"orgfontsize": "",
		"orgwidth": "300",
		"orgheight": "80",
		"style": "width:300px;height:80px;",
		"content": "<textarea title=\"appendix\" name=\"data_11\" leipiplugins=\"textarea\" value=\"\" orgrich=\"0\" orgfontsize=\"\" orgwidth=\"300\" orgheight=\"80\" style=\"width:300px;height:80px;\"></textarea>"
	}
]

JSON的定义：JavaScript Object Notation

参考资料：

类似 XML

JSON 是纯文本
JSON 具有“自我描述性”（人类可读）
JSON 具有层级结构（值中存在值）
JSON 可通过 JavaScript 进行解析
JSON 数据可使用 AJAX 进行传输

相比 XML 的不同之处

没有结束标签
更短
读写的速度更快
能够使用内建的 JavaScript eval() 方法进行解析
使用数组
不使用保留字

为什么使用 JSON？

对于 AJAX 应用程序来说，JSON 比 XML 更快更易使用：

使用 XML

读取 XML 文档
使用 XML DOM 来循环遍历文档
读取值并存储在变量中

使用 JSON

读取 JSON 字符串
用 eval() 处理 JSON 字符串

2.JSON.Parse(）和JSON.Stringify()

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

例子：

//定义一个字符串

var data='{"name":"goatling"}'

//解析对象

JSON.parse(data)

结果是：

name:"goatling"

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

var data={name:'goatling'}

JSON.stringify(data)

结果是：

'{"name":"goatling"}'

3.json中{ } []的区别

3.1、JSON语法是JavaScript对象表示语法的子集。JSON数据的书写格式是：名称/值对。

（1）数据在键值对中

（2）数据由逗号分离

（3）花括号保存对象

（4）方括号保存数组

3.2、JSON的值：

（1）数字（整数或者浮点数）

（2）字符串

（3）逻辑值（true或false）

(4) 数组

（5）对象

（6） null

3.3、在 JSON里[]是 Array(也就是数组)，{}是Ojbect（也就是对象），

[] Array 的key 是 int，{} 的key 是 string。

例如 var dot1=["a"];就是一个数组

var dot2={"a"};就是一个对象

一个数组是可以包含多个对象的

例如： var dot1=[{a:"a"},{b:"b"}]; dot1就包含了2个对象

同样，dot1={[{a:"a"},{b:"b"}]} 就是一个对象，只是这个对象包含了一个
---------------------

参考：json教程

json.stringgify和json.parse的区别

json中{}和[]的区别

Three_ST

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript中 JSON序列化{} [] parse() stringify的爬坑之路

最近在项目中遇到了一个参数传递后的数据解析问题：在web页面中通过props传递一个对象OK，但是传递数组时就出现了问题，测试了很久，期间使用了JSON的stringify()和object。assign()方法，出来的方法就是有问题，结果不断尝试对比发现是数据序列化的问题，VUE的props直接传递的是对象，但是在layui中传递的对象变成了一个string，可能和我传递的方法...
复制链接

扫一扫