wal*_*lee 5 html javascript ajax html5 json
我是编程的初学者.我研究过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%;
}
.oee{width: 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}';您称为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...