0

What I'm trying to do is iterate over a certain column in a table > grab the binID > send that using xmlhttprequest > then use json[bin].floor to add info to the cell from which I grabbed each binID originally. For some reason, bin is returning null for me in my code (using a for loop) but works fine in the code I'b grabbing from which uses .forEach(). I would like to use a for loop as it is already in place to handle various other types of IDs that can be found

I can't seem to figure out why bin is coming up as null in this code in the xmlhttprequest...

if(typeof scanColumn !== 'undefined'){
    for(var l=0; l<scanColumn.length; l++){
        var currentScan = scanColumn[l].innerText;
        var bin = currentScan.match(/[A-Z]\d{2,3}[A-Z]\d{2,3}/);
        if (bin !== null){
            if(JSON.parse(localStorage.options).podInfo.on == true){
                var url = "https://some.site.com/?bin_id=" + bin[0].trim()
                GM_xmlhttpRequest({
                    method: "GET",
                    url: url,
                    onload: function(response) {
                        var json = JSON.parse(response.responseText) //this returns info from each cell
                        var floor = json[bin[0].trim()].floor //unable to define floor because bin is null
}})}}}}

but this code has bin defined in the xmlhttprequest block.

function findBins() {
  var binResultRows = document.querySelectorAll(".result-table tr:not(.tablesorter-header)");
  var columnNB = -Infinity;
  for (const col of document.querySelectorAll('.result-table tr.tablesorter-header > th')) {
    if (col.textContent.trim() === "Scannable ID") columnNB = col.cellIndex;
  }
  // Iterate every row
  binResultRows.forEach(function(tr) {
    var containerTD = tr.querySelector(`.result-table td:nth-child(${columnNB + 1})`);
    if (!containerTD || containerTD.classList.contains("had_adjacent_bins")) return;
    var bin= containerTD.innerText.match(/[A-Z]\d{1,3}[A-Z]\d{1,3}/)[0];
    var url = "https://some.site.com/?bin_id=" + bin[0].trim()
    GM_xmlhttpRequest({
      method: "GET",
      url: url,
      onload: function(response) {

        var message = '';
          var json = JSON.parse(response.responseText);
          var floor = json[bin.trim()].floor;
          message = '<font color=" #ff5733"><b>Floor:</b> <i>' + floor + '</i></font> <br/>';
        // Add the message to the table cell we were iterating.
        containerTD.innerHTML += message;
      }
    });
  });
}
Pshock13
  • 101
  • 6
  • 2
    use `let` instead of `var` and those variables will be block scoped instead of function scoped and I think most of your issues will be resolved – Jaromanda X Jul 05 '22 at 05:19
  • Holy ****, that seems to have worked. I never understood the difference between using `let` vs `var` and so I always used the latter. (Still don't quite understand it yet, but I know what to look into now) Any idea why the .forEach() loop works though it doesn't use `let`? – Pshock13 Jul 05 '22 at 05:42
  • 2
    forEach uses a callback function ... `var` is function scoped – Jaromanda X Jul 05 '22 at 05:43

0 Answers0