Pass and parse arguments from a <div>'s data-options attribute to a JavaScript function

Question

I have a <div> with some options in a data-options attribute:

<div class="slider" data-options="container: value, speed: 1000, edgePadding: 45, lazyload: true">

This attribute contains the arguments I need for every <div> with a .slider class.

I'm saving those arguments into an options variable with:

var options = value.dataset.options;

Then I need to pass those options to a function tns for each .slider element:

var forEach = function (array, callback, scope) {
  for (var i = 0; i < array.length; i++) {
    callback.call(scope, i, array[i]);
  }
};

var sliders = document.querySelectorAll('.slider');

forEach(sliders, function (index, value) {
  var options = value.dataset.options;

  let slider = tns({
      /************ PARAMETERS GO HERE ***********/
  });
});

How can I achieve that?

Danziger · Accepted Answer · 2018-06-25 15:29:59Z

3

You can use JSON.parse if you change a bit the syntax of the value of that attribute adding curly braces and escaped quotes ("):

const slider = document.getElementById('slider');

console.log(JSON.parse(`${ slider.dataset.options }`));

<div id="slider" data-options="{ &quot;container&quot;: &quot;value&quot;, &quot;speed&quot;: 1000, &quot;edgePadding&quot;: 45, &quot;lazyload&quot;: true }">

Another alternative that looks better would be to use single quotes ' and eval():

const slider = document.getElementById('slider');

console.log(eval(`(${ slider.dataset.options })`));

<div id="slider" data-options="{ 'container': 'value', 'speed': 1000, 'edgePadding': 45, 'lazyload': true }">

Or just parse the value of the attribute yourself:

const slider = document.getElementById('slider');
const options = {};

slider.dataset.options.split(',').forEach((pair) => {
  const [key, value] = pair.split(':');
  
  options[key.trim()] = value.trim();
});

console.log(options);

<div id="slider" data-options="container: value, speed: 1000, edgePadding: 45, lazyload: true">

More elaborated parsing logic:

const slider = document.getElementById('slider');
const options = {};

slider.dataset.options.split(',').forEach((pair) => {
  const [key, value] = pair.split(':');
  
  let parsedValue = value.trim();
  
  if (!isNaN(parsedValue)) {
    options[key.trim()] = +parsedValue;
  } else if (parsedValue === 'true' || parsedValue === 'false') {
    options[key.trim()] = parsedValue === 'true';
  } else {
    options[key.trim()] = parsedValue;
  }
});

console.log(options);

<div id="slider" data-options="container: value, speed: 1000, edgePadding: 45, lazyload: true">

edited Jun 25, 2018 at 15:29

answered Jun 25, 2018 at 14:59

Danziger

21.4k6 gold badges59 silver badges90 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Danziger Over a year ago

@ysanmiguel I have updated the answer with 2 different examples. One using JSON.parse(), if you can change a bit the syntax of the value you set on that data- attribute, and another one parsing it yourself if you can't change that syntax.

ysanmiguel Over a year ago

Mate great, thanks a lot. I solve the problem using the JSON.parse and JSON syntax inside data-options. Thank you very much!!!

Ignacio Ramos · Accepted Answer · 2018-06-25 15:00:11Z

1

Please consider pass the data options separately.

For this:

 <div class="slider" data-options="container: value, speed: 1000, edgePadding: 45, lazyload: true">

is better

 <div class="slider" data-container="value" data-speed="1000" data-edgePadding"45" data-lazyload"true">

And then catch each data-element:

In plain JS...

 document.querySelector(".slider").getAttribute("data-container");
 document.querySelector(".slider").getAttribute("data-speed");
 //...

In jQuery...

 $('.slider').data('container')
 $('.slider').data('speed')
 $('.slider').data('container')
 //...

answered Jun 25, 2018 at 15:00

Ignacio Ramos

616 bronze badges

Collectives™ on Stack Overflow

Pass and parse arguments from a <div>'s data-options attribute to a JavaScript function

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related