jquery count multidimensional array by value

Question

Please help me to count specific values in a table.

I have some data in this form:

var data = {
    "metadata": ["FZ", "CS", "CU", "CZ"],
        "values": [
        ["CON", "184.0", "null", "null"],
        ["ERG SRL", "35.0", "null", "57.0"],
        ["IO", "6.0", "null", "null"],
        ["IND", "null", "1753.0", "null"],
        ["LIXL", "1644.0", "null", "3748.0"],
        ["MOXRL", "2285.0", "null", "0.0"],
        ["MOLXL", "11.0", "null", "0.0"],
        ["MURX", "5362.0", "null", "275.0"],
        ["STRL", "197.0", "null", "39.0"]
    ]
};

Here are the results on jsbin. In that table I have some values like null, 0.0 and other.

All I want is to count this values on their key: EXAMPLE: This is my table:

FZ      CS       CU     CZ
CON     184.0   null    null
ERG     35.0    null    57.0
IO      6.0     null    null
IND     null    1753.0  null
LIXL    1644.0  null    3748.0
MOXRL   2285.0  null    0.0
MOLXL   11.0    null    0.0
MURX    5362.0  null    275.0
STRL    197.0   null    39.0

Here is the result I want:

       CS  CU CZ
all     9  9  9
null    1  8  3
0.0     0  0  2
>0      8  1  4

The only result was when I count cell in generated tables, but this is not good if I want to have pagination.

I tried .length(), count++ based on several answers on stackoverflow.com, but no result.

Thank you all for hints and answers.

There is no builtin solution to do this. You have to create your own function to filter/count all these properties/values. — Vural
– Vural, Commented Mar 30, 2013 at 23:21
can you give me a hint? a starting point? i'm new to javascript — DGA
– DGA, Commented Mar 30, 2013 at 23:23

Benjamin Gruenbaum · Accepted Answer · 2013-03-30 23:52:03Z

2

function countValues(values, column, search) {
  var total = 0;

  for(var i  = 0; i < values.length; i++) {
    if(values[i][column] === search)
      total++;   
  }

  return total;
}

How to use: countValues(data.values, 2, "null")

In your example:

FZ is column 0   

CS is column 1

CU is column 2

CZ is column 3

I hope its clear enought.

here is a Fiddle

But I would recommend to use frameworks like AngularJS or underscore

edited Mar 30, 2013 at 23:52

Benjamin Gruenbaum

278k90 gold badges524 silver badges524 bronze badges

answered Mar 30, 2013 at 23:36

Vural

8,75611 gold badges43 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

DGA Over a year ago

Thank you very much! I spend two days with no luck and you solved my problem.

RobG Over a year ago

Cool, but the OP will need to call the function 12 times, and it only does equivalence, it doesn't do the ">0" comparison.

Vural Over a year ago

1. String comparison has been asked, 2. This is very simple example for him to startup.

charlietfl · Accepted Answer · 2013-03-31 03:06:22Z

1

Here's a solution that maps all the data all the way through to creating the table

HTML:

<table id="counter"></table>

JS:

var tableHeader=['<tr><th></th>'];
/* final mapped object, structured to make html generation and search of metadata vs category easy*/
/* arrays wil contain category count in same array order as metadata*/  
var catObj = {'all':[], 'null':[], '0.0':[], '&gt;0':[]};/* "&gt;" used intentionally vs ">" due to html entity*/
/* create header row and populate count arrays with zeros*/
$.each(data.metadata,function(i,item){
    tableHeader.push('<th>'+item+'</th>');
    $.each(catObj,function(key,arr){
        arr[i]=0;
    });    
});

tableHeader.push('</tr>');


/* categorize the values and update appropriate counter array*/
$.each(data.values,function(i,arr){
    $.each(arr, function(idx, val){ 
         catObj[getCategory(val)][idx] ++;
    });
});
/* create the table rows from counter arrays*/
var rowsHtml=[];
$.each( catObj,function(key,arr){
   rowsHtml.push('<tr><td>'+key+'</td>');
    rowsHtml.push( '<td>'+arr.join('</td><td>')+'</td></tr>');  
});
/*insert table html*/
$('#counter').html( tableHeader.join('')+rowsHtml.join('')) 


 /* helper to do categorizing of each value*/      
function getCategory(value) {
    if (isNaN(value)) {
        return value != 'null' ?  'all': 'null';
    } else {
        return value == 0 ? '0.0' : '&gt;0';
    }
}

DEMO: http://jsfiddle.net/ykuzg/4

EDIT:

If needed can do a search of final object based on metadata value as follows:

function searchCats( meta, category){
   return catObj[category][ $.inArray(meta, data.metadata) ]; 
}

useage

searchCats('FZ', 'all') // returns 9

edited Mar 31, 2013 at 3:06

answered Mar 31, 2013 at 2:11

charlietfl

172k14 gold badges125 silver badges154 bronze badges

1 Comment

DGA Over a year ago

Thank you for your answer. Vury give me a good starting point to learn how to make the rest of the functions i need it. You give me a more complex and better that i can use in other tables. Thank you both. I accept both answers. I can VOTE UP because i don't have reputation points, but i mark as accepted answer.

Collectives™ on Stack Overflow

jquery count multidimensional array by value

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related