dbrree dbrree - 1 month ago 11
jQuery Question

Can't call specific value in Array that was created by JSON being .push(ed) to it?

For some reason I am struggling to figure out how to call specific values that were .push(ed) to an array from JSON.

I have .push(key + ":" value); pushing to an array called tooltipValues.

When I do tooltipValues.join, I can see that everything is populating in my array BUT, the array looks like this in console:

["value1:skill-one value1", "value2:skill-one value2", "value3:skill-one value3"]
, which isn't creating the same model as my JSON. I want to be able to call tooltipValues.value1 for instance, but I haven't been able to figure out how to do this. I've tried everything I can think of.

Is there a way that I can keep the JSON intact to where I can call each individual value as I see fit? The reason I have this setup this way is to be able to look at my data-tooltip tag in my HTML, compare it to the JSON and pull the JSON that matches the data-tooltip.

You will see below in my JS what I'm doing and commented out, what I would like to do like so:

var tooltip = $("<div class='tooltip'>" + tooltipValues.join("<br>") + "</div>")
// WHAT I WOULD LIKE TO DO
// var tooltip = $("<div class='tooltip'>" + tooltipValues.value1 + "</div><div>" + tooltipValues.value2 + "</div>)


Here is my code:



tooltipData = {
"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() {
//console.log( 'hovering on' , $(this).attr('tooltip') );
var tooltipJSON = tooltipData[$(this).data("tooltip")];
var tooltipValues = [];

if (tooltipJSON) {
$.each(tooltipJSON, function(key, value) {
tooltipValues.push(key + ":" + value);
console.log(tooltipValues);
});
}
var tooltip = $("<div class='tooltip'>" + tooltipValues.join("<br>") + "</div>")
// WHAT I WOULD LIKE TO DO
// var tooltip = $("<div class='tooltip'>" + tooltipValues.value1 + "</div><div>" + tooltipValues.value2 + "</div>)
.css({
'color': '#fff',
'position': 'absolute',
'zIndex': '99999',
'width': '100px',
'height': '150px',
'background-color': '#333',
});
$(this).append(tooltip);
$(document).on('mousemove', function(e) {
$('.tooltip').css({
left: e.pageX + 10,
top: e.pageY - 10
});
});
},
function() {
$('.tooltip').remove();
}
);

div {
width: 100px;
border: 1px solid #000;
padding: 10px;
margin: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='skill' data-tooltip="skill-one">Skill One</div>
<div class='trinket' data-tooltip="trinket-two">Trinket Two</div>
<div class='hero' data-tooltip="hero-three">Hero Vestal</div>




Answer Source

Unless I'm missing some intermediate step, you already have the object as you want it. The defined tooltipData contains objects and when you get it with var tooltipJSON = tooltipData[$(this).data("tooltip")];, you get the object in the format you want to use (it is not JSON, it is an JS object)

In other words, you can just use tooltipValues = tooltipData[$(this).data("tooltip")] and use it as in your commented out example

tooltipData = {
  "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() {
    //console.log( 'hovering on' , $(this).attr('tooltip') ); 
    var tooltipValues= tooltipData[$(this).data("tooltip")];    

    if(!tooltipValues)return;
    var tooltip = $("<div class='tooltip'><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) {
      $('.tooltip').css({
        left: e.pageX + 10,
        top: e.pageY - 10
      });
    });
  },
  function() {
    $('.tooltip').remove();
  }
);
div {
  width: 100px;
  border: 1px solid #000;
  padding: 10px;
  margin: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='skill' data-tooltip="skill-one">Skill One</div>
<div class='trinket' data-tooltip="trinket-two">Trinket Two</div>
<div class='hero' data-tooltip="hero-three">Hero Vestal</div>