dbrree dbrree - 1 month ago 10
Javascript Question

Undefined JSON error in console when using .getJSON but not using embedded data

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 Source

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