一个对象以“{”开始,“}”结束。每个“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"
    }
}

页面结果

image.png

代码

<!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 += "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"+k2 +": "+goodsSpecs[k1][k2]+"<br>";
            }
        }
        $("#goodsSpecs").html(res);
    </script>
</body>
</html>