How to Get the Values of Data Attributes in JavaScript Code

How can I get the values of data attributes in JavaScript code?

You need to access the dataset property:

document.getElementById("the-span").addEventListener("click", function() {
  var json = JSON.stringify({
    id: parseInt(this.dataset.typeid),
    subject: this.dataset.type,
    points: parseInt(this.dataset.points),
    user: "Luïs"
  });
});

Result:

// json would equal:
{ "id": 123, "subject": "topic", "points": -1, "user": "Luïs" }

Getting the values of data-* attribute and set a list of them

Watch your capitals. Data attributes are case sensitive.

console.log($("#serviciosHotel").data("listServices"));

Should be

console.log($("#serviciosHotel").data("listservices"));

Then it works.

How to access data-attributes of HTML elements using javascript

This answer shows how you can get a custom attribute from JavaScript.

Summary: you can use getAttribute()

x.getAttribute("data-amount");

EDIT:@James also makes a good point, which is x is the selector, not the option. Thus you will probably need a combination of our two answers:

x.options[x.selecetdIndex].getAttribute("data-amount");

how to get html data attribute in javascript?

Like this:

document.querySelector('script.blue-button').dataset

Here is the reference:

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset

How do I correctly save values into my data- attributes?

I see your problem is that you are appending a button each time for a single. Instead of setting a button like that use attr to set an attribute after the button was appended:

// Dummy data
const result = [
  {
    tokenId: 100,
    messageToRecipient: "Message 1",
  },
  {
    tokenId: 101,
    messageToRecipient: "Message 2",
  }
]


// updated forEach
result.forEach((item, index)=>{
  $('#assetInheritor').append(`<button id="button-${index}" onclick="fetchValue(this)">Button ${index + 1}</button> <br/> <br/>`);
  $(`#button-${index}`).attr("data-value1", item.tokenId);
  $(`#button-${index}`).attr("data-value2", item.messageToRecipient);

})

// updated function
function fetchValue(_button){  
  console.log(_button.dataset.value1);
  console.log(_button.dataset.value2)
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="assetInheritor"></div>

Get list of data-* attributes using javascript / jQuery

Actually, if you're working with jQuery, as of version ~~1.4.3~~ 1.4.4 (because of the bug as mentioned in the comments below), data-* attributes are supported through .data():

As of jQuery 1.4.3 HTML 5 data-
attributes will be automatically
pulled in to jQuery's data object.

Note that strings are left intact
while JavaScript values are converted
to their associated value (this
includes booleans, numbers, objects,
arrays, and null). The data-
attributes are pulled in the first
time the data property is accessed and
then are no longer accessed or mutated
(all data values are then stored
internally in jQuery).

The jQuery.fn.data function will return all of the data- attribute inside an object as key-value pairs, with the key being the part of the attribute name after data- and the value being the value of that attribute after being converted following the rules stated above.

I've also created a simple demo if that doesn't convince you: http://jsfiddle.net/yijiang/WVfSg/