加载 JSON 时"unexpected token :"

Question

我试图在html页面中加载本地JSON文件，然后搜索匹配并获取相关信息，但我在加载部分遇到了一些麻烦。

现在，当点击一个区域时，标题改变了，而主体保持不变，并且我在控制台中得到两个错误:"意外标记;"json是未定义的，第一个是关于"; "后"list"在我的JSON的第二行，而另一个考虑JSON中使用的$(#IOC)…

olympics.json:

{
"list": [
{
"Country": "United States",
"IOC": "USA",
"Summer_Gold": "1,070",
"Summer_Silver": 841,
"Summer_Bronze": 745,
"Summer_Total": "2,656",
"Winter_Gold": 105,
"Winter_Silver": 113,
"Winter_Bronze": 89,
"Winter_Total": 307,
"Total_Gold": "1,175",
"Total_Silver": 954,
"Total_Bronze": 834,
"Total_Total": "2,963"
},
...
]}

HTML:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<area class="ModArea" target="" alt="Iceland" title="Iceland" coords="138,388,35,540,232,748,549,585,516,374"
shape="poly" data-toggle="modal" data-target="#Modal">   
<div class="modal fade" id="Modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle"
aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="country_name"></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<p id="IOC">IOC: </p>
</div>
</div>
</div>
</div>

JS:

$(".ModArea").click(function () {
var name = $(this).attr('title');
$("#country_name").html(name);
require(['/static/olympics.json'], function (json) {
$("#IOC").html(json.list.find(element => element.Country === name));
});
});

Answer 1

你的名字当然需要匹配你想要的东西

这个效果更好。您只需要获得一次JSON

let element;
require(['/static/olympics.json'], function(json) {
element = json;
$(".ModArea").on("click", function() {
var name = $(this).attr('title');
$("#country_name").html(name);
const countryData = element.list.find(element => element.Country === name);
$("#IOC").html(JSON.stringify(countryData))
});
});

测试代码

const json = {
"list": [{
"Country": "Iceland",
"IOC": "IS",
"Summer_Gold": "1,070",
"Summer_Silver": 841,
"Summer_Bronze": 745,
"Summer_Total": "2,656",
"Winter_Gold": 105,
"Winter_Silver": 113,
"Winter_Bronze": 89,
"Winter_Total": 307,
"Total_Gold": "1,175",
"Total_Silver": 954,
"Total_Bronze": 834,
"Total_Total": "2,963"
}, ]
}

$(".ModArea").click(function() {
var name = $(this).attr('title');
$("#country_name").html(name);
const countryData =json.list.find(element => element.Country === name); 
$("#IOC").html(JSON.stringify(countryData))
console.log(name,$("#IOC").html())
/*

require(['/static/olympics.json'], function(json) {
$("#IOC").html(json.list.find(element => element.Country === name));
});

*/

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img class="europe_img" src="https://mapswire.com/download/europe/europe-political-map-miller.jpg" usemap="#europe" alt="Europe">
<map name="europe">
<area class="ModArea" target="" alt="Iceland" title="Iceland" coords="138,388,35,540,232,748,549,585,516,374"
shape="poly" data-toggle="modal" data-target="#Modal">   
<div class="modal fade" id="Modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle"
aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="country_name"></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<p id="IOC">IOC: </p>
</div>
</div>
</div>
</div>
</map>