jquery data is not parsing value html5 data custom attribute

Question

I have the following HTML tags generated by back end

<select name="brand" class="form-control">
    <option value="1" data-info="[{id=1, name=detail#1}, {id=2, name=detail#2}, {id=3, name=detail#3}]">brand#1</option>
    <option value="2" data-info="[{id=3, name=detail#3}, {id=4, name=detail#4}, {id=5, name=detail#5}]">brand#2</option>
</select>

I am trying to access data-info value when user change option, so i try this code

$('#brand').on('change', function(){
    var optionSelected = $("option:selected", this);
    var info = optionSelected.data("info")

    console.log(typeof info)
})

But when i get typeof info i get a string, and i need and object.

If i try JSON.parse(info) i get SyntaxError: JSON.parse: expected property name or '}' at line 1 column 3 of the JSON data

I understand this error could be for two reasons info is already parsed or it is not valid json.

Any help is appreciated

The JSON that you have is invalid

Rajaprabhu Aravindasamy
– Rajaprabhu Aravindasamy

2016-04-07 18:06:44 +00:00
Commented Apr 7, 2016 at 18:06 — Rajaprabhu Aravindasamy
– Rajaprabhu Aravindasamy, Commented Apr 7, 2016 at 18:06

Ouroborus · Accepted Answer · 2016-04-07 18:10:44Z

3

jQuery's JSON handler only translates valid JSON. The JSON you have in there is not valid. Specifically, it's missing the necessary quotes and you're using = rather than :. It should read something like:

<option value="1" data-info='[{"id":1, "name":"detail#1"}, {"id":2, "name":"detail#2"}, {"id":3, "name":"detail#3"}]'>brand#1</option>

For reference, the JSON spec.

answered Apr 7, 2016 at 18:10

Ouroborus

17k8 gold badges42 silver badges65 bronze badges

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

1 Comment

mario martinez Over a year ago

you are right @Ouroborus, i just fixed the error in backend, now is rendering valid json as you suggest and i am getting objects

Collectives™ on Stack Overflow

jquery data is not parsing value html5 data custom attribute

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related