JavaScript解析JSON
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript解析JSON相关的知识，希望对你有一定的参考价值。
一个对象以“”开始，“”结束。每个“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>
解析 JSON 文件以在 JavaScript 中使用
【中文标题】解析 JSON 文件以在 JavaScript 中使用【英文标题】：Parsing JSON file to use in JavaScript 【发布时间】：2018-09-18 01:31:11 【问题描述】：我正在尝试解析 JSON 文件，以便可以使用 JavaScript 访问其数据。这是 JSON 文件的示例：
"Veg":
"French beans 300g": 81969,
"Bunched beetroot": 78272,
"Squash box": 45450,
"Bunched carrots 500g": 90435,
"Courgettes x3": 17824,
"Fennel x1": 14816,
"Shiitake mushrooms 150g": 5166,
"Spring onions 125g": 65034,
"Red peppers x2": 11671,
这是我正在使用的 JavaScript：
<script>
var sourceData;
// Initial data load
fetch("data.json",
method: "GET",
headers: new Headers(
'Content-Type': 'application/json',
'Accept': 'application/json'
)
).then(function (body)
return body.json();
).then(function (data)
sourceData = data;
);
</script>
但我收到此错误：
Failed to load resource: Preflight response is not successful
和
Fetch API cannot load <file path> Preflight response is not successful
【问题讨论】：
您是如何发送请求的？我的意思是，您使用的是 cURL、Postman 还是浏览器？如果您使用的是浏览器，浏览器中的地址栏会显示什么？它是以file:/// 还是http:// 开头的？
你没有回答我的问题。
浏览器，文件：///
您不能使用从文件浏览器打开的浏览器窗口中的 XHR 请求（获取）。您的 HTML 文件必须从服务器打开才能正常工作。
我明白了。谢谢，我试试看
【参考方案1】：
尝试使用
parseVariable = JSON.parse(JsonVariable);
console.log(parseVariable);
【讨论】：
以上是关于JavaScript解析JSON的主要内容，如果未能解决你的问题，请参考以下文章