最近在项目中遇到了一个参数传递后的数据解析问题:
在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> </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=\"是\" />是 <input type=\"checkbox\" name=\"data_6\" value=\"否\" />否 </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=\"是\" />是 <input type=\"checkbox\" name=\"data_8\" value=\"否\" />否 </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=\"是\" />是 <input type=\"checkbox\" name=\"data_10\" value=\"否\" />否 </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> </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=\"是\" />是 <input type=\"checkbox\" name=\"data_6\" value=\"否\" />否 </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=\"是\" />是 <input type=\"checkbox\" name=\"data_8\" value=\"否\" />否 </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=\"是\" />是 <input type=\"checkbox\" name=\"data_10\" value=\"否\" />否 </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教程