Targeting object within a data element with jQuery

Question

I'm trying to capture a value from an object in a data attribute. The example below is a shortened version of the element I'm working with.

<div class="interest-select" data-ixp-input-state={
"instanceId":"iMABIId8pUGkQNMZ4izOLg",
"dataField":{\"id\":694,\"name\":\"ProductInterest\"}",
"validation":"valid",
"required":true,"value":"career",
"hasValue":true"}</div>

So far I've tried a few variations of the jQuery below, however this keeps returning undefined:

var stateObj= $(".interest-select").attr("data-ixp-input-state")
var value= stateObj[5]//this should be equal to "career"

cнŝdk · Accepted Answer · 2017-09-21 21:41:52Z

2

In fact the data-ixp-input-state value is a JSON string you should wrap it between two " first, then escape the " characters inside it or replace them with '.

Then you can get it's value using $(".interest-select").data("ixp-input-state"), you will get a string, you can then parse it to read intenal objects.

Demo:

This is a Demo:

var value = $(".interest-select").data("ixp-input-state");

console.log(value);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="interest-select" data-ixp-input-state="{
'instanceId':'iMABIId8pUGkQNMZ4izOLg',
'dataField':{'id':694,'name':'ProductInterest'},
'validation':'valid',
'required':true,'value':'career',
'hasValue':true}"> the content</div>

answered Sep 21, 2017 at 21:41

cнŝdk

32.2k7 gold badges62 silver badges81 bronze badges

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

Comments

trincot · Accepted Answer · 2017-09-21 21:36:02Z

You have several JSON-syntax errors in that data attribute: such as dangling double quotes (after the last true, and after ProductInterest"}, ...). On the other hand, the whole data property's value should be quoted, and this is better done with another type of quote (single quote), so you don't have to do any escaping.

Also the div opening tag is not properly ended with a >.

If you correct all that, jQuery will translate that data attribute's value to a JS object when accessing it with the data method, using camel case:

var stateObj= $(".interest-select").data("ixpInputState")
console.log(stateObj);

.as-console-wrapper { max-height: 100% !important; top: 0; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="interest-select" data-ixp-input-state='{
"instanceId":"iMABIId8pUGkQNMZ4izOLg",
"dataField":{"id":694,"name":"ProductInterest"},
"validation":"valid",
"required":true,"value":"career",
"hasValue":true}'></div>

Clive Ciappara · Accepted Answer · 2017-09-21 22:40:01Z

You had some syntax errors in your JSON:

The 'data-' attribute should start and end with single quotations (to keep using the double quotes)
The dataField values shouldn't have the slash before the quotation marks
You had an extra quotation mark after the last true boolean
There was a missing > at the end of the div

Small suggestion: indentation helps in these things to make the code more clear and easier to find issues

<div class="interest-select"
    data-ixp-input-state='{
        "instanceId":"iMABIId8pUGkQNMZ4izOLg",
        "dataField": { "id": 694, "name": "ProductInterest" },
        "validation":"valid",
        "required":true,
        "value":"career",
        "hasValue":true
    }'></div>

And instead of the '.attr' method, you should use the '.data' method, the difference being that the latter will automatically parse the data into JSON format. You can then call each JSON value by adding '.keyname' after the object, like this:

<script>
    var stateObj = $(".interest-select").data("ixp-input-state");
    var result = stateObj.value;
</script>

or this:

<script>
    var result = $(".interest-select").data("ixp-input-state").value;
</script>

gjijo · Accepted Answer · 2017-09-22 03:13:48Z

0

var stateObj = $(".interest-select").attr("data-ixp-input-state");
stateObj = JSON.parse(stateObj);
console.log(stateObj["value"]);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="interest-select" data-ixp-input-state='{
        "instanceId":"iMABIId8pUGkQNMZ4izOLg",
        "dataField": { "id": 694, "name": "ProductInterest" },
        "validation":"valid",
        "required":true,
        "value":"career",
        "hasValue":true
    }'></div>

You should Parse your data.

answered Sep 22, 2017 at 3:13

gjijo

1,20612 silver badges16 bronze badges

Collectives™ on Stack Overflow

Targeting object within a data element with jQuery

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related