JavaScript - Getting value of data attribute returns undefined

Question

So I have a data-time attribute that holds an integer value fetched from my database. I get the value of it but it returns undefined. I inspected the browser and my data-time attribute stores the value correctly. It is really strange because I am doing the same thing before that and it doesn't return undefined. Here is my code:

<option data-price="{{ $availableOption->price * $course }}" data-time="{{ $availableOption->delivery_time }}">
...
</option

Script

$('.config-option option:selected').each(function() {
    var currentElement = $('this');
    var optionDeliveryTimeStr = currentElement.attr('data-time');
    console.log(optionDeliveryTimeStr);
});

I do the exact same thing before that with the data-price attribute and it returns the value as string. But it doesn't work with the data-time attribute. If someone could offer a solution and an explanation I would be very thankful.

gurvinder372 · Accepted Answer · 2016-05-14 10:33:28Z

4

Your problem is this line

 var currentElement = $('this');

remove quotes from this and replace it with

 var currentElement = $(this);

answered May 14, 2016 at 10:33

gurvinder372

68.6k11 gold badges78 silver badges98 bronze badges

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

3 Comments

codearts Over a year ago

Yes it did. I have it correctly with data-price but didn't notice I wrote quotes with the second data attribute.

Andy Over a year ago

Also consider jQuery has a another method for getting data atts .data('time').

gurvinder372 Over a year ago

@Andy many time this data method doesn't work especially when this attribute is set dynamically at later stage than element creation. So, I would rather suggest to keep it simply since OP hasn't mentioned how this attribute is created.

Dhara Parmar · Accepted Answer · 2016-05-14 10:33:43Z

0

Use $(currentElement) instead of currentElement:

$('.config-option option:selected').each(function() {
    var currentElement = $(this);
    var optionDeliveryTimeStr = $(currentElement).attr('data-time'); // OR $(currentElement).data('time');
    console.log(optionDeliveryTimeStr);
});

edited May 14, 2016 at 10:33

Dhara Parmar

8,1231 gold badge19 silver badges27 bronze badges

answered May 14, 2016 at 10:32

Jayesh Chitroda

5,03915 silver badges18 bronze badges

1 Comment

guradio Over a year ago

$(currentElement).attr('data-time'); == $($(this)).attr('data-time'); ?

Collectives™ on Stack Overflow

JavaScript - Getting value of data attribute returns undefined

2 Answers 2

3 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Related