CODEWITHSUNDEEP
javascriptjqueryhtml
Tim King
Tim King

Reputation: 21

Targeting object within a data element with jQuery

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"

Upvotes: 2

Views: 42

Answers (4)

gjijo
gjijo

Reputation: 1206

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.

Upvotes: 0

Clive Ciappara
Clive Ciappara

Reputation: 558

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>

Upvotes: 0

cнŝdk
cнŝdk

Reputation: 32145

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>

Upvotes: 2

trincot
trincot

Reputation: 350766

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>

Upvotes: 1

Related Questions