how to turn html data attributes into json

Question

Say I have this

<div id="x" data-id='1' data-prop1='peace' data-prop2='out'>Text</div>

in jQuery i can get the data like so

var row = $('#x')

var x = {
    id : row.data('id'),
    prop1: row.data('prop1'),
    prop2: row.data('prop2'),
};

it would be way more convenient if I could do something like this

var row = $('#x');
var x = row.data.serialize();

Anyone know how to do this?

EDIT:

I forgot to mention that var x = row.data() will do the job but there's all this jquery junk in there.

I want to send the data as part of an ajax request once i've got it.

eg,

remove: function (row, g, o) {

if (confirm(o.deleteConfirmation)) {

                    var url = o.deleteAction;
                    var data = row.data();

                    $.ajax({
                        url: url,
                        type: 'POST',
// THIS WORKS                                
//                            data: {
//                                id: row.data('id'),
//                                applicationId: row.data('applicationId')
//                            },
// THIS DOESN'T                                
                        data : data,
                        success: function (result) {
                            g.html(result.Html);
                            methods.rebind(g, o);
                        }
                    });
                }
 }

EDIT : My 'Working' Solution

I got it working by killing the jQuery{some number} thing out of the data object

first I grabbed this from here

if (!String.prototype.startsWith) {
    String.prototype.startsWith = function(str) {
        return !this.indexOf(str);
    };
}

Then I had to do this:

var rowData = row.data();

var data = {};

for(var propertyName in rowData) {
    if(!propertyName.startsWith('jQuery'))
        data[propertyName] = rowData[propertyName];
}

Can you elaborate a bit more on what you mean by "it doesn't work"? — Blender, Dec 14 '11 at 00:40
it doesn't work == when the click event is fired (using chrome btw) instead of POSTing to the deleteAction Uri with the data in the POST payload the page goes into and endless loop reissuing the POST event. — Peter, Dec 14 '11 at 00:47

Blender · Accepted Answer · 2011-12-14T00:46:09.183

5

You can call .data() with no arguments and it should return an object with all of the element's attributes:

var row = $('#x'); // Won't work as your element's ID is invalid, but oh well.
var x = row.data();

Demo: http://jsfiddle.net/kYf3t/1/

Can anyone help remove the __proto__ property? I can't delete it via delete x['__proto__'].

edited Dec 14 '11 at 00:46

answered Dec 14 '11 at 00:31

Blender

289,723
53
439
496

yes true, I realized that my question didn't quite explain what my issue was...see edit. – Peter Dec 14 '11 at 00:33
__proto__ is not the issue. there's this jQuery property that is causing trouble...see my edits – Peter Dec 14 '11 at 01:13

how to turn html data attributes into json

1 Answers1