How to select an element based on the property of an object inside a data attribute?

Question

If my markup looks like this:

<div data-test="{ "value" : "bar", "_id" : 1234, "name" : "john", "age" : 25 }">...</div>
<div data-test="{ "value" : "foo", "_id" : 1235, "name" : "paul", "age" : 26 }">...</div>
<div data-test="{ "value" : "drummer", "_id" : 1236, "name" : "ringo", "age" : 22 }">...</div>

How would I select a particular element using JQuery if I only had the key 'bar' or 'foo'?

I could pull out the whole object for each row and iterate through it looking for a match but I'd rather not if there is a more efficient method.

How can I cleanly select based on the property of an object?

jQuery uses xpath for selecting object. Xpath has no support for embedded json structures. — Edson Medina
– Edson Medina, Commented Oct 18, 2012 at 8:48
But this: $('#myDiv').data('value') returns bar or foo so JQuery is able to operate on the object, no? — Oliver Lloyd
– Oliver Lloyd, Commented Oct 18, 2012 at 8:52
Can you use JSON syntax in your markup? Then you could use JSON.parse() and match the value element more cleanly. The difference is that you need to use double quotes rather than single quotes around the strings. — Barmar
– Barmar, Commented Oct 18, 2012 at 9:21

Indi · Accepted Answer · 2012-10-18 09:03:10Z

2

Try this

$('div[data-test$=": bar }"]')
$('div[data-test$=": foo }"]')

More details here

UPDATE: If attributes are not ending with bar/foo then you could try contains selector

$('div[data-test*="'value' : 'bar'"]')
$('div[data-test*="'value': 'foo'"]')

More details here

Or you could also use starts selector if it starts with value

edited Oct 18, 2012 at 9:03

answered Oct 18, 2012 at 8:53

Indi

33.9k7 gold badges61 silver badges80 bronze badges

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

2 Comments

Oliver Lloyd Over a year ago

I should have been clearer, the actual object is much more complicated and does not end with the value property. I'll update the question with a more accurate example.

Ziggy Over a year ago

If this solution works for you, then you are not interested in properties, but rather in attributes. That selector won't work for data properties set by, for example, .data("stuff", "things").

Oliver Lloyd · Accepted Answer · 2012-10-18 13:25:55Z

1

You can use:

$("div").filter(function() {
    return $(this).data("test").value == "bar";
})

jQuery.data() automatically parses a data value that's in JSON format into the corresponding object.

FIDDLE

edited Oct 18, 2012 at 13:25

Oliver Lloyd

5,0247 gold badges37 silver badges55 bronze badges

answered Oct 18, 2012 at 9:41

Barmar

789k57 gold badges554 silver badges669 bronze badges

3 Comments

Oliver Lloyd Over a year ago

.filter() is a more accurate solution as it will only return exact matches.

Barmar Over a year ago

You need to change your outer quotes to single quotes or escape the inner double quotes.

Oliver Lloyd Over a year ago

You'd think so but actually Chrome renders the html like this (even when the template code is using single quotes) and, despite it looking wrong, I am able to successfully access the object using JQuery's .data() method. I admit, it's odd, but it's working.

Collectives™ on Stack Overflow

How to select an element based on the property of an object inside a data attribute?

2 Answers 2

2 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related