怀疑是json数据还是JavaScript对象
Posted
技术标签:
【中文标题】怀疑是json数据还是JavaScript对象【英文标题】：Doubts on whether json data or JavaScript object 【发布时间】：2019-05-02 17:05:00 【问题描述】：我是编程初学者。我研究过 Stack Overflow 和 W3schools，我的小项目只是为了学习和改进。
我有一个问题，我的程序正在正常工作，但问题是我不确定（有疑问）我制作的 json 文件是真正的 json 还是 javascript 对象？
一个说是，一个说不是，如果不是真正的json怎么改成真正的json，因为我想不通。
我有三个组，每个组有 4 人，这些人在所有 3 个组中都是相同的，只是数字不同（学分或投票等），我有一个名为“values”的 json 文件（我认为是 json） .json'。
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="values.json"></script>
<style>
*
box-sizing: border-box;
box-sizing: border-box;
-webkit-box-sizing
-moz-box-sizing: border-box;
.oee
float:left;
height: 550px;
width: 100%;
display: inline-block;
.gauge
height: 250px;
display: inline-block;
width: 100%;
h1
float:left;
body
margin: 100px auto;
text-align: center;
@media only screen and (orientation: landscape)
.gauge
width: 30%;
.oeewidth: 50%;
margin-left: -132px;
</style>
</head>
<body >
<h1>people votes</h1>
<div class="all">
<div id="ww1" class="oee"></div>
<div id="ww2" class="gauge" data-value=valuesparsed['Pekka']></div><br>
<div id="ww3" class="gauge"></div><br>
<div id="ww4" class="gauge"></div>
</div>
<script src="raphael-2.1.4.min.js"></script>
<script src="justgage.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function(event)
var valuesparsed = JSON.parse(values2)
var dflt =
min: 0,
max: 100,
// donut: true,
gaugeWidthScale: 1.1,
counter: true,
hideInnerShadow: true
var ww1 = new JustGage(
id: 'ww1',
value: valuesparsed['Laura'],
title: 'Laura ',
defaults: dflt
);
var ww2 = new JustGage(
id: 'ww2',
title: 'Pekka',
defaults: dflt
);
var ww3 = new JustGage(
id: 'ww3',
value: valuesparsed['Jussi'],
title: 'Jussi',
defaults: dflt
);
var ww4 = new JustGage(
id: 'ww4',
value: valuesparsed['Kalle'],
title: 'Kalle',
defaults: dflt
);
);
</script>
</body>
</html>values.json
values1= '"Laura" : 45, "Pekka" : 89, "Jussi" : 35, "Kalle" : 25';
values2= '"Laura" : 75, "Pekka" : 59, "Jussi" : 85, "Kalle" : 95';
values3= '"Laura" : 55, "Pekka" : 15, "Jussi" : 45, "Kalle" : 67';【问题讨论】：
乍一看，我认为您的 .json 内容格式不正确，请使用 this tool 检查错误并修复格式 【参考方案1】：您调用 values.json 的文件不是 JSON，而是 JavaScript 语言的脚本。您确实可以通过script 标签包含和运行这样的脚本。
但是，如果您希望数据采用 JSON 格式，并且希望将其从文件加载到其他 JavaScript 代码中，请按以下步骤操作：
将 JSON 放入你的文件中（没有变量名，没有赋值，没有尾随分号，只有 JSON）——它只能是 一个 数据结构，所以让我们使用一个数组：
["Laura" : 45, "Pekka" : 89, "Jussi" : 35, "Kalle" : 25,
"Laura" : 75, "Pekka" : 59, "Jussi" : 85, "Kalle" : 95,
"Laura" : 55, "Pekka" : 15, "Jussi" : 45, "Kalle" : 67]
删除script src=标签。
将 DOMContentLoaded 回调函数标记为异步：
document.addEventListener("DOMContentLoaded", async function(event)
// ^^^^^
在该回调中添加代码以加载 JSON 并将其解析为变量 arr：
var response = await fetch("values.json");
var arr = await response.json();
var valuesparsed = arr[1]; // choose here which of the three you want to work with
// Rest of your code comes here...
【讨论】：
感谢您的正确回答，我有一个问题，您为什么不使用 JSON.parse() 进行解析？有很多“解析”的方法吗？ 我没有使用它，因为fetch 响应提供了一种方法来做到这一点。否则，您必须首先使用await response.text() 从响应中检索文本，然后然后在其上调用JSON.parse，这代表多了一步。
请问您为什么使用 fetch 而不是 ajax，还是不需要它？
Fetch 正在做 ajax。也许你正在考虑 jQuery 的实现？【参考方案2】：
你的价值.json
values1= '"Laura" : 45, "Pekka" : 89, "Jussi" : 35, "Kalle" : 25';
values2= '"Laura" : 75, "Pekka" : 59, "Jussi" : 85, "Kalle" : 95';
values3= '"Laura" : 55, "Pekka" : 15, "Jussi" : 45, "Kalle" : 67';
不是真正的 JSON。
JSON 以
开头一个对象。
或
[
一个数组。
并根据它们的开始以相同的结尾。
一个例子是
"Laura" : 45, "Pekka" : 89, "Jussi" : 35, "Kalle" : 25
在您的场景中，您希望有一个 JSON 数组来保存您的对象，如下所示：
[
"Laura": 45,
"Pekka": 89,
"Jussi": 35,
"Kalle": 25
,
"Laura": 75,
"Pekka": 59,
"Jussi": 85,
"Kalle": 95
,
"Laura": 55,
"Pekka": 15,
"Jussi": 45,
"Kalle": 67
]
【讨论】：
首先我是这样做的，但不知道如何将每个组与每个人联系起来，让一个工作而另一个没有......0、"Hello"、null 都是有效的 JSON 表示形式，除了对象和数组。
如何让它像现在一样工作，但使用真正的 json ？【参考方案3】：
values.json 的内容是一个 JavaScript 程序，它将三个字符串字面量分配给三个全局变量。
每个字符串的 值 都是 JSON 文本。
如果您想在该文件中包含 只是 JSON，那么您需要：
3 个单独的 URL 每个都包含一个 JSON 文本，例如：
"Laura" : 45, "Pekka" : 89, "Jussi" : 35, "Kalle" : 25
或1 个包含对象数组的 URL：
[
"Laura" : 45, "Pekka" : 89, "Jussi" : 35, "Kalle" : 25,
"Laura" : 75, "Pekka" : 59, "Jussi" : 85, "Kalle" : 95,
"Laura" : 55, "Pekka" : 15, "Jussi" : 45, "Kalle" : 67
]
那么您需要使用不同的机制来加载 JSON 数据（JSON 不是 JavaScript，您无法使用 <script> 加载它），例如 the fetch API。
async function process_json()
const response = await fetch('your_json.json');
const data = response.json();
console.log(data);
【讨论】：
因为它现在可以工作，但是如何使它与真正的 json 一起工作？ 并且为了选择 json 文本，我需要某种循环？你能举个例子吗，或者它可以不用循环来完成？【参考方案4】：所以，@walee，为了强调现有的答案，我创建了一个plunker 来显示the difference between JSON and JS objects。
简而言之，我已将您的 values.json 提取为真正的 json：-
[
"Laura" : 45, "Pekka" : 89, "Jussi" : 35, "Kalle" : 25
...
...
]
还有Js：
const values1 = "Laura": 45, "Pekka": 89, "Jussi": 35, "Kalle": 25,
...
在 plunker 中，我演示了使用 Fetch API 获取 json 文件，但可以随意使用任何 HTTP 库。
【讨论】：
现在它正在工作并且不需要任何循环，但是当使用 json 数组时我需要某种循环吗？为了解析值？ 并非如此，您并不总是需要循环。您仍然可以通过键访问数组元素，例如 arrayValues[0] 以获取第一个对象和 arrayValues[n-1] 为最后一个对象（其中 n 是数组的长度） plunker 未正确显示如何处理 JSON 文件中的值。代码正确运行只是因为您还定义了 inside 脚本的值。但是一旦你把它拿出来只依赖 JSON，它就行不通了。 @trincot，脚本定义的变量如何与 JSON buddy 相关？以上是关于怀疑是json数据还是JavaScript对象的主要内容，如果未能解决你的问题，请参考以下文章
js解析与序列化json数据(一)json.stringify()的基本用法
JavaScript解析excel表格，转化成XML格式或者Json格式的数据。