Turn data-attribute array into object

Question

I'm setting an array using an HTML5 data attribute like this: <dl data-options='[{ "multiExpand": true} ]'> And grabbing it with jQuery like so: var options = $this.data('options')[0]

It works, but I'm hoping to eliminate the need for the brackets in the markup. I'm wanting to be able to write <dl data-options="multiExpand: true; otherOption: false;">

How do I need to change up the JS to grab it in that format? I've been trying .makeArray and .toJSON but they return undefined.

adeneo · Accepted Answer · 2014-06-11 22:13:57Z

4

All you really need is valid JSON in the attribute, and jQuery will convert it to an object

<dl data-options='{"multiExpand":true,"otherOption":false}'>

FIDDLE

If you just have to use that invalid syntax, you have to parse it yourself, something like

var arr = $('#test').data('options').split(';').filter(Boolean),
    obj = (function() {
        var o = {};
        $.each(arr, function(_,v) {
            var parts = v.split(':');
            o[$.trim(parts[0])] = $.trim(parts[1]);
        });
        return o;
    }());

FIDDLE

edited Jun 11, 2014 at 22:13

answered Jun 11, 2014 at 22:08

adeneo

319k29 gold badges410 silver badges392 bronze badges

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

2 Comments

SirTophamHatt Over a year ago

Assuming your dl is as you want it: <dl data-options="multiExpand: true; otherOption: false;"> Otherwise you'll have an array with a single object inside of an object.

Trevan Hetzel Over a year ago

Thanks for this. I was hoping to not have to parse it myself (like there would be a magic jQuery method for this) but it looks like that's my only option if I want the data-options syntax without the brackets.

Collectives™ on Stack Overflow

Turn data-attribute array into object

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related