使用 .getJSON 但不使用嵌入数据时,控制台中出现未定义的 JSON 错误

德布雷

任何人都可以帮助我解释为什么我console.log(tooltipValues的返回未定义时console.log(tooltipJSON)填充没有问题?

我不完全确定为什么,但是当我将数据放入我的 JS 中时,它工作得很好。但是一旦我将数据导出到 JSON 文件,它就会中断。需要明确的是,console.log(tooltipJSON)当它是外部 JSON 文件时,我没有问题。超级坚持这一点,因为我无法嵌入 JSON,因为它长期持有 1000 条记录。

var tooltipJSON;
    $.getJSON("js/tooltips.json", function (data) {
      tooltipJSON = data;

      $('.skill, .trinket, .hero').hover(
        function() {
          var tooltipValues = tooltipJSON[$(this).data("tooltip")];    
          console.log(tooltipValues);
          console.log(tooltipJSON);

          if(!tooltipValues)return;
          var tooltip = $("<div class='tp-popup'><div>" + tooltipValues.value1 + "</div><div>" + tooltipValues.value2 + "</div></div>")
            .css({
              'color': '#fff',
              'position': 'absolute',
              'zIndex': '99999',
              'width': '100px',
              'height': '150px',
              'background-color': '#333',
            });
          $(this).append(tooltip);
          $(document).on('mousemove', function(e) {
            $('.tp-popup').css({
              left: e.pageX,
              top: e.pageY,
            });
          });
        },
        function() {
          $('.tp-popup').remove();
        }
      ); 
    });

上面使用的外部 JSON:

[
  {
    "skill-one": {
        "value1": "skill-one value1",
        "value2": "skill-one value2",
        "value3": "skill-one value3"
    },
    "trinket-two": {
        "value1": "trinket-two value1",
        "value2": "trinket-two value2",
        "value3": "trinket-two value3"
    }
  }
]

这返回没有问题吗?

tooltipJSON = {
    "skill-one": {
      "value1": "skill-one value1",
      "value2": "skill-one value2",
      "value3": "skill-one value3"
    },
    "trinket-two": {
      "value1": "trinket-two value1",
      "value2": "trinket-two value2",
      "value3": "trinket-two value3"
    },
}
$('.skill, .trinket, .hero').hover(
        function() {
          var tooltipValues = tooltipJSON[$(this).data("tooltip")];    
          console.log(tooltipValues);
          console.log(tooltipJSON);

          if(!tooltipValues)return;
          var tooltip = $("<div class='tp-popup'><div>" + tooltipValues.value1 + "</div><div>" + tooltipValues.value2 + "</div></div>")
            .css({
              'color': '#fff',
              'position': 'absolute',
              'zIndex': '99999',
              'width': '100px',
              'height': '150px',
              'background-color': '#333',
            });
          $(this).append(tooltip);
          $(document).on('mousemove', function(e) {
            $('.tp-popup').css({
              left: e.pageX,
              top: e.pageY,
            });
          });
        },
        function() {
          $('.tp-popup').remove();
        }
      ); 

这是要关注的代码,无论出于何种原因console.log(tooltipValues);都不适用于外部 JSON,但 JSON 本身的控制台日志可以工作并且不会出现任何问题。请注意,consoles.log 都使用嵌入式内部 JSON。

$('.skill, .trinket, .hero').hover(
        function() {
          var tooltipValues = tooltipJSON[$(this).data("tooltip")];    
          console.log(tooltipValues);
          console.log(tooltipJSON);
哈维尔·雷伊

JQuery 的getJSON方法在不同的 JQuery 版本中的工作方式不同,除非您实现fail回调,否则会产生静默错误comma在 JSON 内容结束之前有一个尾随导致方法失败。另外,我使用的是 JQuery 2.1 并且该方法没有显示任何内容。我升级到3.1.1,然后跟踪并修复了错误。下面是我测试的相关代码。

var tooltipJSON;
$.getJSON("js/tooltips.json", function (data) {
  tooltipJSON = data;
  console.log("data", data);
  var key = $(this).data("tooltip"), tooltipValues = tooltipJSON[key];
  console.log("'"+key+"'", tooltipValues);
}).fail(function (err) {
  console.log("error", err);
});

外部 JSON 应该是一个对象{...}而不是一个包含对象的数组[{...}]

{
  "skill-one": {
    "value1": "skill-one value1",
    "value2": "skill-one value2",
    "value3": "skill-one value3"
  },
  "trinket-two": {
    "value1": "trinket-two value1",
    "value2": "trinket-two value2",
    "value3": "trinket-two value3"
  }
}

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

使用JSONP时,如何捕获jQuery $ .getJSON(或数据类型设置为“ jsonp”的$ .ajax)错误?

如何使用getJSON分配json对象

jQuery使用getJSON自动完成

无法使用getJSON从Flask Rest API获取Json

jQuery getJSON报告未定义函数错误

尝试在Chrome中创建书签时,控制台中出现错误“浏览器未定义”

为什么在通过$ .getjson()传递var时无法使用点(。)运算符访问json属性

使用Webpack编译脚本后,控制台中出现了更好的错误

使用for循环时未定义的JSON错误

$ .getJSON未捕获的参考错误$未定义

当包含标题时,为什么在代码中出现“使用未定义类型”错误?

在静态json文件的Node js上使用getJSON时不支持获取协议

使用$ .getJSON以正确的格式从php为emberjs返回json数据

使用$ .getJson从LocalDrive读取Json文件

使用spring和getjson对口音进行错误编码

使用.getJSON的JSONP返回未定义

使用jQuery.getJSON成功函数更改JSON结果

nil:NilClass的未定义方法'foo'-在视图中引发错误,但可在Rails控制台中使用

使用$ .getJSON的Struts2 json响应导致未定义的响应

从提供的json文件中使用.getJSON访问Json数据

如何使用$ .getJSON的结果?

$$。getJSON,使用变量而不是URL?

试图在jQuery中使用getJson加载JSON数据

使用$ .getJSON方法错误

使用带标签的中断时,java 中出现“未定义标签”错误

$.getJSON 使用动态变量

获取未定义的属性:在 WordPress 插件的 DOM 内使用 JSON 时出现 stdClass::$key 错误

如何使用 append 和 getJSON

使用失败方法对 jQuery getJSON 函数错误进行单元测试,使用 Jasmine 和 Karma

TOP 榜单

热门标签

归档