jQuery how to build json object from html tag attributes

Question

I have a table and on each row I add some attributes that later I need to get when I click on the row with jQuery.

Here is a sample of a <tr> element:

<tr data-id="1" data-employeeid="4" data-acceess="none" data-area="HR">
   <td class="sorting_1" tabindex="0">ID 01</td>
   <td>This is a custom descriptiion</td>                                                   
</tr>

I would like to build a json object based on data.* attributes but also adding the column values.

So in this example I would like to get something like this:

{'employeeid':'4', 'access':'none', 'area':'HR', 'data1':'ID 01', 'data2':'This is a custom description'}

Any clue?

You shouldn't have attributes with periods in them, and you should be using data-attributes, as in a hyphen — adeneo
– adeneo, Commented Nov 18, 2016 at 3:18
Great feedback let me change that in my code and in the question here...:) — VAAA
– VAAA, Commented Nov 18, 2016 at 3:19

adeneo · Accepted Answer · 2016-11-18 03:26:18Z

1

If you use valid data attributes

<tr data-id="1" data-employeeid="4" data-acceess="none" data-area="HR">

All you need is $(element).data() to get all of them as an object.
If you wanted to add the text from all the children elements as well, you could extend that object

var tr   = $('tr[data-id="1"]');
var data = tr.data();

$.extend(data, $('td',tr).toArray().reduce(function(a,b,i) {
	a['data' + (i+1)] = $(b).text();
    return a;
}, {}));

console.log(data)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr data-id="1" data-employeeid="4" data-acceess="none" data-area="HR">
        <td class="sorting_1" tabindex="0">ID 01</td>
        <td>This is a custom descriptiion</td>
    </tr>
</table>

answered Nov 18, 2016 at 3:26

adeneo

319k29 gold badges410 silver badges392 bronze badges

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

Collectives™ on Stack Overflow

jQuery how to build json object from html tag attributes

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related