How to get the Count of Unique values from html table column

Reply

beginer___

Member

26 Points

79 Posts

How to get the Count of Unique values from html table column

Mar 22, 2018 06:52 PM|beginer___|LINK

Dear All,

I had the below html table which consist of some rows .Among that I required to get the count of unique names for a Column "Company" .
Can any one please help me how can I do it either using java-script or Jquery.

<!DOCTYPE html>
<html>
<head>
<style>
#customers {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

#customers td, #customers th {
    border: 1px solid #ddd;
    padding: 8px;
}

#customers tr:nth-child(even){background-color: #f2f2f2;}

#customers tr:hover {background-color: #ddd;}

#customers th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    background-color: #4CAF50;
    color: white;
}
</style>
</head>
<body>

<table id="customers">
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Königlich Essen</td>
    <td>Christina Berglund</td>
    <td>Sweden</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Berglunds snabbköp</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Königlich Essen</td>
    <td>Philip Cramer</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
  <tr>
    <td>North/South</td>
    <td>Simon Crowther</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>North/South</td>
    <td>Marie Bertrand</td>
    <td>France</td>
  </tr>
</table>

</body>
</html>

Reply

bruce (sqlwo...

All-Star

52424 Points

12787 Posts

Re: How to get the Count of Unique values from html table column

Mar 23, 2018 01:12 AM|bruce (sqlwork.com)|LINK

in vanilla javascript:

var names = [];
var tds = document
    .getElementById('customers')
    .querySelectorAll("tr td:first-child");
for (var i=0; i < tds.length; ++i) {
  var customer = tds[i].textContent; 
  if (names.indexOf(customer) == -1)
    names.push(tds[i].textContent);
}
alert(names);

or in more modern javascript:

var names = 
     [...document
        .getElementById('customers')
        .querySelectorAll("tr td:first-child")
     ].reduce(function(p,c) {
          var customer = c.textContent; 
          return (p.indexOf(customer) == -1)
             ? [...p,customer]
             : p;
       },[]);

alert(names);

bruce (sqlwork.com)

Reply

beginer___

Member

26 Points

79 Posts

Re: How to get the Count of Unique values from html table column

Mar 23, 2018 02:59 AM|beginer___|LINK

Sir,

Just added count++; and got the unique values But I a unable to find the way to implement the count++ in modern.js .Could you please help me in it

if (names.indexOf(customer) == -1)
count++;
names.push(tds[i].textContent);

Reply

Cathy Zou

Star

8670 Points

2882 Posts

Re: How to get the Count of Unique values from html table column

Mar 23, 2018 03:12 AM|Cathy Zou|LINK

Hi Beginer

Working code as below:

 <style>
        #customers {
            font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
            border-collapse: collapse;
            width: 100%;
        }

            #customers td, #customers th {
                border: 1px solid #ddd;
                padding: 8px;
            }

            #customers tr:nth-child(even) {
                background-color: #f2f2f2;
            }

            #customers tr:hover {
                background-color: #ddd;
            }

            #customers th {
                padding-top: 12px;
                padding-bottom: 12px;
                text-align: left;
                background-color: #4CAF50;
                color: white;
            }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            var a = {}, l = 0;
            $('table tr td:first-child').each(function () {
                if (!a[$(this).text()]) {
                    l++;
                    a[$(this).text()] = true;
                }
            });

            alert(l);
        })
    </script>
  <form id="form1" runat="server">
        <div>
            <table id="customers">
                <tr>
                    <th>Company</th>
                    <th>Contact</th>
                    <th>Country</th>
                </tr>
                <tr>
                    <td>Alfreds Futterkiste</td>
                    <td>Maria Anders</td>
                    <td>Germany</td>
                </tr>
                <tr>
                    <td>Königlich Essen</td>
                    <td>Christina Berglund</td>
                    <td>Sweden</td>
                </tr>
                <tr>
                    <td>Centro comercial Moctezuma</td>
                    <td>Francisco Chang</td>
                    <td>Mexico</td>
                </tr>
                <tr>
                    <td>Magazzini Alimentari Riuniti</td>
                    <td>Roland Mendel</td>
                    <td>Austria</td>
                </tr>
                <tr>
                    <td>Berglunds snabbköp</td>
                    <td>Helen Bennett</td>
                    <td>UK</td>
                </tr>
                <tr>
                    <td>Königlich Essen</td>
                    <td>Philip Cramer</td>
                    <td>Germany</td>
                </tr>
                <tr>
                    <td>Laughing Bacchus Winecellars</td>
                    <td>Yoshi Tannamuri</td>
                    <td>Canada</td>
                </tr>
                <tr>
                    <td>Magazzini Alimentari Riuniti</td>
                    <td>Giovanni Rovelli</td>
                    <td>Italy</td>
                </tr>
                <tr>
                    <td>North/South</td>
                    <td>Simon Crowther</td>
                    <td>UK</td>
                </tr>
                <tr>
                    <td>North/South</td>
                    <td>Marie Bertrand</td>
                    <td>France</td>
                </tr>
            </table>

        </div>
    </form>

Output:

Best regards

Cathy

MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

Reply

bruce (sqlwo...

All-Star

52424 Points

12787 Posts

Re: How to get the Count of Unique values from html table column

Mar 23, 2018 03:15 PM|bruce (sqlwork.com)|LINK

the count is just:

names.length

note: javascript supports ++, but you broke the if by not adding {} when you make it multi-line.

also I like using hash map trick suggested. in vanilla javascript:

var names = 
     [...document.querySelectorAll("#customers tr td:first-child")]
       .reduce(function(p,c) {
          p[c.textContent] = 0; 
          return p;
       },{});

// show length of hashmap
alert(Object.keys(names).length);

bruce (sqlwork.com)

How to get the Count of Unique values from html table column [Answered]RSS

4 replies

Shortcuts

How to get the Count of Unique values from html table column

Re: How to get the Count of Unique values from html table column

Re: How to get the Count of Unique values from html table column

Re: How to get the Count of Unique values from html table column

Re: How to get the Count of Unique values from html table column