首页 > 编程语言 >JavaScript解析JSON

JavaScript解析JSON

时间:2023-03-20 12:32:37浏览次数:48  
标签:壁挂 支持 JavaScript 接口 mm JSON nbsp 解析 goodsSpecs

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

标签:壁挂,支持,JavaScript,接口,mm,JSON,nbsp,解析,goodsSpecs
From: https://blog.51cto.com/lianghecai/6132568

相关文章

  • MySql前缀索引解析
    一、什么是前缀索引所谓前缀索引,说白了就是对文本的前几个字符建立索引(具体是几个字符在建立索引时去指定),比如以产品名称的前10位来建索引,这样建立起来的索引更小,查询效......
  • JavaScript加密/解密与OpenAI的对接:生成加密对话的ChatGPT 4.0应用
    首先,我们来看一个简单的JavaScript加密算法的示例,该算法将输入的字符串每个字符的ASCII值加上1,并返回一个新的字符串。以下是加密函数的代码:javascriptCopycodefunctionen......
  • Cron Job 表达式解析
    CronJob​​RedisantToolbox​​是一款面向开发者的多合一工具箱,超过30种常用的开发工具;精心设计,快速、高效;离线使用,尊重您的隐私。[TOC]一遍又一遍地执行相同的任务可能......
  • Cron Job 表达式解析
    CronJob表达式解析RedisantToolbox是一款面向开发者的多合一工具箱,超过30种常用的开发工具;精心设计,快速、高效;离线使用,尊重您的隐私。目录CronJob表达式解析什么......
  • SpringMVC返回JSON对象遇到的错误
    SPringMVC返回JSON对象遇到报错:org.springframework.web.servlet.handler.AbstractHandlerExceptionResolver.logExceptionResolved[org.springframework.http.converter......
  • JSONP、XHR的属性
    JSONP1、JSONP的原理script标签跨域不会被浏览器阻止JSONP主要就是利用scrip标签,加载跨域文件2、使用JSONP实现跨域服务端准备好JSONP接口https://www.imooc.com/api/......
  • Playwright+JavaScript-1.环境准备与快速开始
    前言Playwright可以支持在TypeScript、JavaScript、Python、.NET、Java中使用,本系列以JavaScript语言为示例。环境准备1.安装node.js需要Node.js14或更高版本2......
  • PHP 将空数组统一 json 序列化为 [] 的弊端
    在PHP中表示空的map或空数组都是以空数组形式,在转化为json数据时,会将空数组统一json序列化成 ​​[]​​,这样就存在一个类型问题。以前我们在与前端交互时一般是与弱类......
  • Python之json模块
    1.python的json模块介绍Python的json模块提供了处理JSON数据的功能。JSON(JavaScriptObjectNotation)是一种轻量级的文本数据格式,使用类似于JavaScript对象的方式......
  • 打牢JavaScript 基础,看这篇
    原文链接:​   ​​https://note.noxussj.top/?source=51cto​​变量声明​在JavaScript程序中,使用一个变量之前应当先声明。变量是使用关键字 ​​var​​ 来声明的......