getting an attribute value using jquery

Question

I am trying to get the 31003 value from the attribute with jquery.

 <a class= "findOption" data-clickaction="changeFilter" data-actionvalue=" {"Company":"31003", "val": "mostrecent";}" href="javascript:void(0);">Most Recent</a>

I have tried,

$(".findOptions").attr('Company').value();

$(".findOptions").attr('data-actionvalue');

I am stuck.

Company is part of the string that is the value of data-actionvalue. Company is itself not an attribute. So you would need to do some searching in that string. It is also invalid HTML because you have double double quotes. — putvande
– putvande, Commented Jun 26, 2015 at 22:19
Avoid using double quotes here and there.... Distinguish them using single quotes and double quotes properly.. — nehem
– nehem, Commented Jun 26, 2015 at 22:20
I think you will need to use single quotes as the data-actiionvalue attribute will read as data-actionvalue=" {" and Company":" will try act like another attribute. " < used to block in / open close the attribute data. — NewToJS
– NewToJS, Commented Jun 26, 2015 at 22:21

Bhojendra Rauniyar · Accepted Answer · 2015-06-26 22:25:16Z

3

You can use data method:

$('.findOption').data('actionvalue')['Company'];//findOption instead as noticed by @Vimalan

And as @Barmar indicated that html is invalid you should be doing like this in your html:

data-actionvalue='{"Company":"31003", "val": "mostrecent"}'

edited Jun 26, 2015 at 22:25

answered Jun 26, 2015 at 22:19

Bhojendra Rauniyar

86k36 gold badges179 silver badges241 bronze badges

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

Comments

Jonathan M · Accepted Answer · 2015-06-26 22:27:51Z

1

First, your HTML isn't correct. Since you're using double quotes in the JSON that's in data-actionvalue, you have to use single quotes as the delimiter around the attribute value. Otherwise, the quote before Company will end the attribute.

Also, you shouldn't have a semicolon (;)` in the value, that's not valid JSON.

<a class= "findOption" data-clickaction="changeFilter" data-actionvalue='{"Company":"31003", "val": "mostrecent"}' href="javascript:void(0);">Most Recent</a>

Then to get a particular property of the data, you need to access it with .:

$('.findOption').data('actionvalue').Company

or []:

$('.findOption').data('actionvalue')['Company']

edited Jun 26, 2015 at 22:27

Jonathan M

17.5k9 gold badges61 silver badges95 bronze badges

answered Jun 26, 2015 at 22:20

Barmar

789k57 gold badges554 silver badges669 bronze badges

8 Comments

NewToJS Over a year ago

Great answer but i'm just curious. If this anchor tag is dynamically created won't it use double quotes by default?

Bhojendra Rauniyar Over a year ago

@NewToJS It doesn't matter.

Barmar Over a year ago

@NewToJS If it's created dynamically, then it doesn't use quotes at all, that's just part of the HTML syntax. If you create it dynamically you're just manipulating the DOM as objects.

NewToJS Over a year ago

@BhojendraNepal I'm asking our of curiosity.

Bhojendra Rauniyar Over a year ago

@NewToJS If you use without quote then also it works.

|

JGV · Accepted Answer · 2015-06-26 22:56:24Z

1

There are couple of corrections in your code:

1) Fix, 'actionvalue' as shown in my code. 2) Use findOption instead of findOptions (it does not exists in your code)

var obj = $(".findOption").data('actionvalue');
$('#result').text(obj.Company);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class= "findOption" data-clickaction="changeFilter" data-actionvalue='{"Company":"31003", "val": "mostrecent"}' href="javascript:void(0);">Most Recent</a>

<br/>
<label id='result'/>

edited Jun 26, 2015 at 22:56

answered Jun 26, 2015 at 22:24

JGV

5,2079 gold badges57 silver badges101 bronze badges

3 Comments

Ja͢ck Over a year ago

Woah, that eval() is completely unnecessary.

JGV Over a year ago

@Ja͢ck, $('.findOption').data('actionvalue')['Company'] or $('.findOption').data('actionvalue').Company is not working. So, I opted to use eval to get the result.

Ja͢ck Over a year ago

Doesn't work because it's not recognised as JSON because you're using single quotes for the keys and values ... instead, you should use double quotes inside and use single quotes for the HTML attribute.

j__ · Accepted Answer · 2016-12-03 16:34:16Z

0

I think this should work

$(".findOption").data('actionvalue')['Company'];

edited Dec 3, 2016 at 16:34

answered Jun 26, 2015 at 22:21

j__

411 silver badge5 bronze badges

Collectives™ on Stack Overflow

getting an attribute value using jquery

4 Answers 4

Comments

8 Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

8 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related