0

I came up with the problem of storing html table data to a 2D array. Instead of using nested loops, I was looking for jquery functions that would allow me to do the same. I found this method which seems to do the job. 

var tRows = $('tr').map(function() {
    return [$(this).find('td').map(function() {
    return $(this).text()
    }).get()]
}).get()

console.log(tRows)

I'd like to know, how I can use a condition, in the given code, to check if the first td of a tris empty or not (or some other condition in general) and thus not add that row to the final array.

EDIT:

Reading the comments and building upon this fiddle, I now have

var tRows = $('tr').map(function() {
  var arr = $(this).find('td').map(function() {
    return $(this).text()
  }).get();

  if (arr[0].length) return[arr]; 
}).get()

This works somewhat, but I was hoping to check the condition in the inner map and return a NULL instead of the entire array. From the discussion here, it seems that it is not possible to abort the inner map call midway, and it will return the entire array. Seems like loops might be better in the end for this job, or did I miss something?

  • `map()` takes parameter which gives you index of current element so you can use that and check text length like this https://jsfiddle.net/Lg0wyt9u/1816/ – Nenad Vracar Apr 22 '17 at 19:17
  • @NenadVracar Oh, I actually meant not adding the entire row i.e the array to the 2d array, instead of the cell. But I'll try to build upon the fiddle to achieve that. –  Apr 22 '17 at 19:33
  • `return return $(this).text() || undefined` – Thomas Apr 22 '17 at 19:42
  • 1
    In that case you can do this https://jsfiddle.net/Lg0wyt9u/1817/ – Nenad Vracar Apr 22 '17 at 20:44
  • @NenadVracar Indeed, didn't occur to me that the inner map can be put in a condition. –  Apr 22 '17 at 20:51

1 Answers1

0

Assuming the code you posted is working for you...

If you want the .text of the first td not empty of each row, the use of a combination of CSS selectors may be the solution.

:first-child
:not
:empty

EDIT
Okay... I improved it a little.
Seem like there can ba some spaces in an empty td... So I used a regex to test it.

Here are the new things I used:
:first
.test() JavaScript method
.trim() JavaScript method

And the CodePen where I tryed it.

$(document).ready(function(){
  console.clear();
  console.log("loading...");

  var tRows = $('tr').map(function() {
    return [$(this).find('td:first').map(function() {
      var pattern = /^\s+$/;
      if($(this).text()!="" && !pattern.test($(this).text())){
        return $(this).text().trim();
      }
    }).get()]
  }).get()

  console.log(tRows)
});

This return: [["blah1],[],[blah7]], in the CodePen...
If you do not want the empty one in the middle:

Second CodePen

$(document).ready(function(){
  console.clear();
  console.log("loading...");

  var tRows = $('tr').map(function() {
    var arr = [$(this).find('td:first').map(function() {
      var pattern = /^\s+$/;
      if($(this).text()!="" && !pattern.test($(this).text())){
        return $(this).text().trim();
      }
    }).get()];

    if(arr[0]!=""){
      return arr;
    }
  }).get()

  console.log(tRows)
});

This return: [["blah1],[blah7]]




2nd EDIT
This can also be achieved this way.
(it implies only one loop and the code is more simple to read).
See 3rd CodePen 
$(document).ready(function(){
  console.clear();
  console.log("loading...");

  var arr=[];
  var counter=0;

  $('tr').each(function() {
    var thisTDtext = [$(this).find("td").first().text().trim()];

    if(thisTDtext!=""){
      arr[counter] = thisTDtext;
      counter++;
    }
  });

  console.log(JSON.stringify(arr));

});

This also return: [["blah1],[blah7]]

Louys Patrice Bessette
  • 33,375
  • 6
  • 36
  • 64