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

Question

Could anyone help explain to me why my console.log(tooltipValues is coming back as undefined when the console.log(tooltipJSON) is populating no problem?

I'm not entirely sure why, but when I just place the data inside of my JS, it works just fine. But as soon as I export the data to a JSON file it breaks. To be clear, I can console.log(tooltipJSON) no problem when it's an external JSON file. Super stuck on this as I can't have embedded JSON due to it longterm holding 1000's of records.

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();
        }
      ); 
    });

EXTERNAL JSON USED IN THE ABOVE:

[
  {
    "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"
    }
  }
]

This returns with no issues though?

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();
        }
      ); 

This is the code to focus on, for whatever reason console.log(tooltipValues); doesn't work with the external JSON, but the console log of the JSON itself works and populates no issues. Note that both consoles.log's work with embedded internal JSON.

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

Answer 1

JQuery's getJSON method works differently across different JQuery versions, giving silent errors unless you implement the fail callback. You have a trailing comma before the end of your JSON content that is causing the method to fail. Also, I was using JQuery 2.1 and the method did not show anything. I upgraded to version 3.1.1 and then traced and fixed the error. Below is the relevant code of my test.

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);
});

The external JSON should be an object {...} rather than an array containing an object [{...}] :

{
  "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"
  }
}