Javascript: manipulate data inside data attributes in HTML-CodePudding

I have a html/js code that takes data from a json and render it to html table. It has been working fine for a while. Recently the number of items being handled has greatly increased and can't afford to put data statically into html anymore. So I have changed the code in html and I'm now using data attributes, and a JS that loops through each item from the json file and writes it to the correct data attribute in html. It works. I have another JS file that scans through all td cells and if a condition is met the text in the cell turns red, or purple. Else it remains standard black. This used to work, but not anymore.

This is the new html code implemented:

<table id="table" align="center" render-area="reboot">
                <thead>
                    <tr>
                        <th  data-tsorter="input-text">
                            Server Name
                            <img src='/icons/sort.png' width='20' height='20' style='display:inline;'>
                        </th>
                        <th  data-tsorter="numeric">
                            Last Boot
                            <img src='/icons/sort.png' width='20' height='20' style='display:inline;'>
                        </th>
                    </tr>
                </thead>
                <tbody render-action="loop">
                    <tr render-data="json">
                        <td>{!Server Name!}</td>
                        <td>{!Last Boot!}</td>
                    </tr>
                </tbody>
            </table>

` and here below the JS that does not work anymore:

const today = new Date();
const todayMonth = (today.getMonth()) 1;
const todayDay = today.getDate();
// Query all table cells in document
document.querySelectorAll('table td').forEach(function(td) {
  const srvDay = parseInt(td.innerHTML.split('/')[1]); // day
  if(Number.isInteger(srvDay)){
    const srvMonth = parseInt(td.innerHTML.split('/')[0]); //month
    // If date contained in td text before current date then apply red background style
    if(srvDay != todayDay || srvMonth != todayMonth){
        td.style.color = "red";
    }
  } 
  if((td.innerHTML.split(' ')[0]).includes('unreachable')){
        td.style.color = "purple";
  }
});

` if I examine that table td through the console, I get that the td html is !Last Boot! and that is why I believe the JS above does not work anymore. But if I look at the Elements console, I see that the DOM has all td correctly filled. In fact all works fine, except the JS above. The question is: how to manipulate data that is filled using data attributes? If I use a class for that td I get the same. Any hint?

UPDATE: I've found that when data is dynamically assigned it goes into an HTMLCollection, which I can now read as I found out which attribute to use to select the correct html element. In fact it contains the data I need, with the td cells filled in. But! don't know how to operate this htmlcollection. I've tried and I'm getting weird results. I've learnt that on htmlcollection foreach does not work. Either transform it into array with Array.from() or use for of loop. When I use any of the two I lose the data and again I get the placeholder {!Last Boot!}. This is how far I got:

`
function tdTextHandler(renderArea){
  const today = new Date();
  const todayMonth = (today.getMonth()) 1;
  const todayDay = today.getDate();
  const newArr = document.querySelectorAll(`[render-area="${renderArea}"]`);
  newArr.forEach(function(e) {
  const newArr4 = (Array.from(e.children))[1].children
  
 console.log(newArr4);


for (item of newArr4) {
  console.log(item);
  const srvDay = parseInt(item.innerHTML.split('/')[1]); // day
  
  if(Number.isInteger(srvDay)){
    const srvMonth = parseInt(item.innerHTML.split('/')[0]); //month
    // If date contained in td text before current date then apply red background style
    if(srvDay != todayDay || srvMonth != todayMonth){
        item.style.color = "red";
    }
  } 
  if((item.innerHTML.split(' ')[0]).includes('unreachable')){
        item.style.color = "purple";
  }
};

the first console.log tells me that I have a htmlcollection and in the console I can see that its entries have the data. But the second console.log shows that the data is gone, although the structure is there and I'm back to the placeholder.

CodePudding user response：

if you have something like:

<div data-myAttribute="1"></div>
<div data-myAttribute="2"></div>
...

you select them :

const els = document.querySelectAll('div[data-myAttribute');
els.forEach(e => {
    ...
})

CodePudding user response：

Solved. As the table is dynamically generated by another JS script, it is in that script (and in its loop) that the JS code above is to be placed.