Use data attribute to retrieve object key's value in javascript (jQuery)

Question

Trying to get back values of an object based on a data attribute. While I have trouble explaining it with the right lexicon, the set up example should be more clear:

var obj = {
  key1: "hello",
  key2: "Hi",
  key3: 1,
  key4: 2
}

$(".key").each(function() {
  var dk = $(this).data('key');
  console.log(obj.dk);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="key" data-key="key1"></div>
<div class="key" data-key="key2"></div>
<div class="key" data-key="key3"></div>
<div class="key" data-key="key4"></div>

Using this manner returns undefined. Anyone can help on this matter. Thanks!

Answer 1

You have to use square brackets to access the key of JSON object with variable. So, change your code to console.log(obj[dk]);

var obj = {
 key1 : "hello",
    key2 : "Hi",
    key3 : 1,
    key4 : 2
}

$(".key").each(function() {
 var dk = $(this).data('key');
 console.log(obj[dk]);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="key" data-key="key1"></div>
<div class="key" data-key="key2"></div>
<div class="key" data-key="key3"></div>
<div class="key" data-key="key4"></div>

When you use console.log(obj.dk) it actually looks for a key with name dk in obj.

See this:

var obj = {
 key1 : "hello",
    key2 : "Hi",
    key3 : 1,
    key4 : 2,
    dk: 6
}

$(".key").each(function() {
 var dk = $(this).data('key');
 console.log(obj.dk);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="key" data-key="key1"></div>
<div class="key" data-key="key2"></div>
<div class="key" data-key="key3"></div>
<div class="key" data-key="key4"></div>