JSFiddle - React, Tailwind, and code Playground
HTML
<table id='dataHere' border='1'>
<thead>
<!-- ID presence on HTML is optional -->
<!--<th style='visibility: collapse'>Id</th>-->
<th>Lastname</th><th>Firstname</th><th>Asset</th><th>Actions</th>
</thead>
<tbody>
</tbody>
</table>
<hr/>
<input type="button" id="viaModel" value="test via model"/>
<input type="button" id="viaDom" value="test via DOM"/>
<div id="debugLog">
</div>
JavaScript
var people = [
{ Id: 1, Lastname: 'Lennon', Firstname: 'John', Asset: 40090.1296 },
{ Id: 2, Lastname: 'McCartney', Firstname: 'Paul', Asset: 38000.34 },
{ Id: 3, Lastname: 'Harrison', Firstname: 'George', Asset: 37000.56 },
{ Id: 4, Lastname: 'Starr', Firstname: 'Ringo', Asset: 40000.78 },
{ Id: 5, Lastname: 'Buendia', Firstname: 'Ely', Asset: 40000.93 },
{ Id: 6, Lastname: 'Marasigan', Firstname: 'Raymund', Asset: 39000.12 },
{ Id: 7, Lastname: 'Zabala', Firstname: 'Buddy', Asset: 39000.13 },
{ Id: 8, Lastname: 'Adoro', Firstname: 'Marcus', Asset: 39000.14344 }
];
var tbl = $('#dataHere');
$('#viaModel').click(function() {
var dl = $('#debugLog');
dl.html('Model-based approach. Data are in their pristine state<br/><br/>');
$.each(people, function() {
var person = this;
dl.append(person.Id + '-->' + person.Lastname + ', ' + person.Firstname + ': ' + this.Asset + '<p/>');
});
});
$('#viaDom').click(function() {
try {
var dl = $('#debugLog');
var tbl = $('#dataHere');
dl.html('Using DOM approach for stashing and extracting data, the Id won\'t be available unless we stash it on HTML<br/><br/>');
var trs = $('tbody > tr', tbl);
$.each(trs, function() {
var tr = this;
var tds = $('td', tr);
// Alas! ID won't be available if you didn't put it in td tag or whatnot.
// If we use DOM approach for stashing our data,
// we have to stash ID on the HTML itself,
// this is called Smart UI approach, this is abhored,
// as the code is tightly coupled to UI/presentation layer.
var tdLastname = $(tds[0]);
...