Can someone help me understand why I'm getting an 'undefined' response when I use console.log(tooltipValues), but there's no issue with console.log(tooltipJSON).
I've noticed that when I embed the data directly in my JS code, everything works fine. However, exporting the data to a JSON file causes it to break. I need to avoid embedding JSON due to the large number of records it will eventually hold.
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();
}
);
});
However, the following internally embedded JSON works without any issues:
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();
}
);
The main problem seems to be related to the utilization of external JSON data. The line console.log(tooltipValues) acts up when using external JSON files, even though the main console log of the JSON itself functions perfectly. Both logs work as expected when dealing with internal embedded JSON.
$('.skill, .trinket, .hero').hover(
function() {
var tooltipValues = tooltipJSON[$(this).data("tooltip")];
console.log(tooltipValues);
console.log(tooltipJSON);