Is there any way to store json object in default/custom attribute of a HTML tag say <tr>

0
votes

I am getting list of objects in JSON response and I am creating dynamic table rows using javascript function. Table doesn't show all of the values for each record, only few columns. When user selects a record in table I don't want to make a server trip to get all attributes of that record from database hence I have fetched all data initially when getting records to be displayed in table. Now on click of a row I want to get this object and display each attribute in form below the table.

My problem is that how to store/bind each record object to respective <tr> tag and retrieve it on click event as HTML allows to assign only String values to tag attributes. HTML5 allows custom attributes with "data-" prefix and we can access them using $("idOfTag").data("atrribute_name_after_data-"); but these attributes also accepts only String value.

I know this may not be most efficient way as there are some other solutions as 1. Storing record objects in array and assigning only index to respective tag so at the time of retrieval we get index from event source and get corresponding object from array. 2. Using jqGrid to dynamically create table/grid according to JSON response.

3
javascriptjqueryjsonhtml
Just keep the list around and reference it when needed. – Malk
Just use JSON.stringify to stringify the object and save it in a data attribute if that's what you want, but whithout any code at all we really can't help you much – adeneo
I would just keep it available rather than storing it on each row. Instead, store an index number on the row that relates to the index of the row's data in the array. – Kevin B

3 Answers

0
votes

The part about .data() only storing string values is not true. You can do:

$('body').data('options', {"name":"Bill"});
var options = $('body').data('options');
console.log( options.name );

I would personally just store an id on the tr and use that to look up something in the array instead of duplicating the array throughout the DOM. Here's a quick example:

var data = {}
data[123] = {"name":"Bill"};
data[458] = {"name":"Ganesh"};

Then have

<tr data-id="458">

Then when that's clicked you can do like...

$('tr').on('click', function(){
  var id = $(this).data('id'), obj = data[id];
  console.log('You clicked on: ', obj.name);
});
0
votes

This may be an alternative approach to saving data in the HTML attributes.

If you're dynamically generating the table using JavaScript you could try something like this

// assuming this is your data
var data = [
    {name:'Joe',surname:'Jones'},
    {name:'Zack',surname:'Tailor'}
];


var tbl = document.getElementById('mytable');
for(var x = 0; x < data.length; x++) {
    var row = tbl.insertRow(x);


    (function(rowData){
        row.onclick = function() {
            // 'rowData' will contain data related to the clicked row
            console.log(rowData);
        }
    })(data[x]);
}

The main advantage here is that you can bind any kind of data to each row, including references to elements etc..

0
votes

I would like to point out some things here.

Firstly, the fact that you can only store strings on the data attribute doesn't limit you in anything. I'd like to remember you that every JSON is a string, before you parse it.

Secondly, you may create a script tag with type='x-whatever-you-want'. It won't be interpreted as javascript and you can get the content later (as http://handlebarsjs.com/ suggests on it's main page.)

Lastly, it's a bad design. Joseph Portelli's solution is probably better. Just be aware that because of how closures work, you may easily get the wrong value of x if you change that code just a bit...