使用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"

Answer 1

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> 

Answer 2

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> 

Answer 3

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>

Answer 4

 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.