Retrieve value from HTML Object

Question

I have the following div (this was already given to me, I did not create it):

<div data-sudo-slider='{"slideCount":1, "moveCount":1, "customLink":"#slider-nav a", "continuous":true, "updateBefore":false, "effect":"sliceRevealDown", "auto":true, "speed":1500, "pause": 5000}'>

as far as my understanding goes (please correct me if I am wrong), we are saying here, that I want to assing the following values (such as slideCount, moveCount, customLink, etc...) to the object named data-sudo-slider.

What I am trying to do in my underlying JavaScript, is to retrieve the value of pause from this object. Here is what I am doing:

var sudoEl = jQuery('[data-sudo-slider]'); 
var pause = sudoEl.pause;

Even though it recognized the slider object, it did not retrieve the value for pause I have passed in (returned value is undefined.

How can I retrieve this value?

Beginner's answer worked. why did you have to specify 'sudoSlider' only for your data? How come this worked? (also, please make it as an answer) — Robert J.
– Robert J., Commented Apr 6, 2016 at 7:24

Abhishekh Gupta · Accepted Answer · 2016-04-06 07:35:37Z

1

You can use data() like this:

The .data() method allows us to attach data of any type to DOM elements in a way that is safe from circular references and therefore from memory leaks. We can retrieve several distinct values for a single element one at a time, or as a set:

$('[data-sudo-slider]').data('sudoSlider').pause;

why did you have to specify 'sudoSlider'?

You can also use sudo-slider.

It worked as the property name is derived as following:

The attribute name is converted to all lowercase letters.
The data- prefix is stripped from the attribute name.
Any hyphen characters are also removed from the attribute name.
The remaining characters are converted to CamelCase. The characters immediately following the hyphens removed in Step 3 become uppercase.

edited Apr 6, 2016 at 7:35

answered Apr 6, 2016 at 7:25

Abhishekh Gupta

6,2464 gold badges20 silver badges49 bronze badges

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

Comments

vaso123 · Accepted Answer · 2016-04-06 07:24:23Z

1

You can get this property by:

$(function () {
    var pause = $('[data-sudo-slider]').data('sudoSlider').pause;
});

$('[data-sudo-slider]') is the div element, where data-sudo-slider is defined. .data('sudoSlider') is the data property value. data is working with - signs a littlebit different, you can read about it in jQuery data documentation.

.pause is the property of JSON object.

answered Apr 6, 2016 at 7:24

vaso123

12.4k4 gold badges37 silver badges68 bronze badges

Comments

Satpal · Accepted Answer · 2016-04-06 07:25:52Z

1

You should use .data() to fetch data-sudo-slider value.

Return the value at the named data store for the first element in the jQuery collection, as set by data(name, value) or by an HTML5 data-* attribute.

var sudoEl = jQuery('[data-sudo-slider]').data('sudo-slider'); 
alert(sudoEl.pause);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-sudo-slider='{"slideCount":1, "moveCount":1, "customLink":"#slider-nav a", "continuous":true, "updateBefore":false, "effect":"sliceRevealDown", "auto":true, "speed":1500, "pause": 5000}'>

edited Apr 6, 2016 at 7:25

answered Apr 6, 2016 at 7:23

Satpal

134k13 gold badges168 silver badges171 bronze badges

3 Comments

T.J. Crowder Over a year ago

Code dumps are not useful answers. Say what you did, and why.

T.J. Crowder Over a year ago

Also, it's important to mention the side-effects of using data (in particular, that the generated object sticks around until the element is destroyed).

GuyT Over a year ago

^which will create memory leaks ;)

nardeas · Accepted Answer · 2016-04-06 07:29:06Z

1

To retrieve the correct element use

var element = $("div[data-sudo-slider]");

You can either get the data-sudo-slider attribute via

var sudoSlider = element.attr("data-sudo-slider");

In which case you will have to convert the string to JSON to access the pause property:

var pause = JSON.parse(sudoSlider).pause;

or better yet, use the .data() method

var sudoSlider = element.data("sudoSlider");
var pause = sudoSlider.pause;

edited Apr 6, 2016 at 7:29

answered Apr 6, 2016 at 7:23

nardeas

6346 silver badges14 bronze badges

Collectives™ on Stack Overflow

Retrieve value from HTML Object

4 Answers 4

Comments

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related