时间戳

首页 > 解决方案 > “意外的令牌：”加载json时

javascript - “意外的令牌：”加载json时

问题描述

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

现在，当单击一个区域时，标题会发生变化，而正文保持不变，并且我在控制台中收到 2 个错误：“意外令牌：”和“json 未定义”，第一个关于“：”之后我的 JSON 的第二行中的“列表”，而另一个关于我的 JS 代码的 $(#IOC)... 行中使用的 json。

奥运会.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));
        });
    });

标签： javascriptjsonrequirejs

解决方案

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

这效果更好。您只需要获取一次 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>

推荐阅读