一个对象以“{”开始,“}”结束。每个“key”后跟一“:”,“‘key/value’ 对”之间运用 “,”分隔。遍历JSON对象中的数据,可通过for-in循环实现。
数据
{
"主题": {
"颜色": "黑色",
"屏幕尺寸": "23.8英寸"
},
"接口": {
"Type-C": "不支持Type-C接口",
"DP接口": "不支持DP接口",
"DVI接口": "不支持DVI接口",
"VGA接口": "支持VGA接口",
"HDMI接口": "支持HDMI接口",
"USB扩展/充电": "不支持USB扩展/充电"
},
"显示": {
"亮度": "280cd/㎡",
"色数": "16.7M"
},
"规格": {
"产品尺寸": "长539.8mm;宽181.8mm;高399.9mm",
"壁挂规格": "100x100mm",
"支架底座": "普通",
"电源类型": "外接电源适配器",
"是否内置音箱": "无内置音箱",
"是否支持壁挂": "支持壁挂",
"产品净重(kg)": "3.2Kg"
}
}
页面结果
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/jquery.js"></script>
</head>
<body>
<div id="goodsSpecs"></div>
<script type="text/javascript">
let goodsSpecs = '{"主题": {"颜色": "黑色", "屏幕尺寸": "23.8英寸"}, "接口": {"Type-C": "不支持Type-C接口", "DP接口": "不支持DP接口", "DVI接口": "不支持DVI接口", "VGA接口": "支持VGA接口", "HDMI接口": "支持HDMI接口", "USB扩展/充电": "不支持USB扩展/充电"}, "显示": {"亮度": "280cd/㎡", "色数": "16.7M"}, "规格": {"产品尺寸": "长539.8mm;宽181.8mm;高399.9mm", "壁挂规格": "100x100mm", "支架底座": "普通", "电源类型": "外接电源适配器", "是否内置音箱": "无内置音箱", "是否支持壁挂": "支持壁挂", "产品净重(kg)": "3.2Kg"}}';
goodsSpecs= JSON.parse(goodsSpecs);
let res = "";
for(let k1 in goodsSpecs){
res += k1+":<br>";
for (let k2 in goodsSpecs[k1]){
res += " "+k2 +": "+goodsSpecs[k1][k2]+"<br>";
}
}
$("#goodsSpecs").html(res);
</script>
</body>
</html>
标签:壁挂,支持,JavaScript,接口,mm,JSON,nbsp,解析,goodsSpecs
From: https://blog.51cto.com/lianghecai/6132568