I want to work with an array to pass through using data-attribute. In my HTML-tag I've this attribute:

data-toshow='["tblp"]'

I can access and use it with jQuery when using

$().data('toshow')

But when using dataset.toshow I don't get the same result. I actually don't get an array.

Can someone explain this to me? And give me the answer how to do the same without the use of jQuery?

I want to work with an array to pass through using data-attribute. In my HTML-tag I've this attribute:

data-toshow='["tblp"]'

I can access and use it with jQuery when using

$().data('toshow')

But when using dataset.toshow I don't get the same result. I actually don't get an array.

Can someone explain this to me? And give me the answer how to do the same without the use of jQuery?

• javascript
• jquery
• arrays
• html
• custom-data-attribute

4 Answers 4

jQuery's .data() method automatically tries to convert the string in your custom data attribute to whatever type it appears to be (in this case an array). JavaScript just treats it as a string, so you need to parse the string to get the same array output you get with jQuery. For example:

// jQuery approach
const jqtest = $('div').data('toshow');
console.log(jqtest);

// Plain JavaScript approach
const jstest = JSON.parse(document.querySelector('div').dataset.toshow);
console.log(jstest);

<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div data-toshow='["tblp"]'></div>

//Use dataset to get a string of all data-* props
const stringVal = document.querySelector('#divA').dataset['toshow'];

//Parse the value of "data-toshow" to get your array
const array = JSON.parse(stringVal);
console.log(array);

<div id="divA" data-toshow='["tblp"]'></div>

Assuming you have HTML similar to:

<div id="theThing" data-toshow='["tblp"]'></div>

or

<div id="theThing" data-toshow='["tblp","arrItem2","arrItem3"]'></div>

//jQuery
var container_jq = $("#theThing");
var container_jq_dataArr = decodeURIComponent(container_jq.data('toshow')).split(",");

//vanilla
var container_vanilla = document.getElementById("theThing");
var container_vanilla_dataArr = JSON.parse(decodeURIComponent(container_vanilla.dataset.toshow));

console.info({jQuery: container_jq_dataArr,vanilla: container_vanilla_dataArr});

jsfiddle in action

Every HTMLElement has dataset property, this property could be null if there is no data attribute in the element, but if there is any data attribute, the dataset property is an array containing all the data values declared on the element.

Given an html like <div data-name='Usher' data-max-number='5'> There are two ways you can get this data attribute using javascript,

One way is to call the element.getAttribute('data-name') or element.getAttribute('data-max-number') of that element.

The second way is through the dataset property of the element. which you would use element.dataset.name to obtain the name attribute or element.dataset.maxNumber NOTE: How max-number bees maxNumber. This is how you access hyphen seperated data-set attribute, using camelCase