neo33 neo33 - 5 months ago 12
jQuery Question

How to assign the elements of a dictionary to a jquery table?

I am writing a webpage to analyze text, in the following form:

"RBD|X|RBD3|C|92173~GJHGWO.NAYE" "SAMBORNSiPOSSSTHRa1"
"RBD|X|RBD|C|92173~GJHGX4.NAYE" "SAMBORNSiPOSSSTHRa"
"RBD|X3|RBD3|C|92173~GJHGX6.NAYE" "SAMBORNSiPOSSSTHRa1"
"RBD|X|RBD|C|92173~GJHGXA.NAYE" "SAMBORNSiPOSSSTHRa2"
"RBD|X|RBD|C|92173~GJHGXA.NAYE" "SAMBORNSiPOSSSTHRa2"
"RBD|X3|RBD|C|92173~GJHGXC.NAYE" "SAMBORNSiPOSSSTHRa"


If I copy a text like that in my text area my webpage colors it, it works well but the problem comes when I try to buld a table with the values of an array that I am using as follows:

var dict = cleanArray.reduce(function(p,c) {
if (p[c] === undefined) {
p[c] = 1;
} else {
p[c]++;
}
return p;
},{});


If I use:

console.log(dict);


with the tables of above I get:

Object {92173: 6, RBD: 10, X: 4, RBD3: 2, C: 6, GJHGWO.NAYE: 1…}
92173
:
6
C
:
6
GJHGWO.NAYE
:
1
GJHGX4.NAYE
:
1
GJHGX6.NAYE
:
1
GJHGXA.NAYE
:
2
GJHGXC.NAYE
:
1
RBD
:
10
RBD3
:
2
SAMBORNSiPOSSSTHRa
:
2
SAMBORNSiPOSSSTHRa1
:
2
SAMBORNSiPOSSSTHRa2
:
2
X
:
4
X3
:
2


I would like to display a table with the values of that dictionary, that in the first column should be displaying the word and then in the second one the frequency as follows:

Word Frecuency
92173 6
RBD 10
X 4
.
.
.


I tried building a table to display those values as follows:

<div id="dynamictable"></div>

$('#dynamictable').append('<table></table>');
var table = $('#dynamictable').children();
table.append("<tr><td>Word</td><td>Frecuency</td></tr>");


but then I don't know how to append the values of the dictionary to the table dynamically, I would like to appreciate any suggestion or advice to achieve this task in order to be more clear I provided the following jsfiddle:
https://jsfiddle.net/adolf33/12bkgd4q/60/

Answer

One straightforward way to go about this is to build the entire table, with data populated, before appending to the DOM. Something along the lines of:

// mock "dict" from OP's fiddle with data provided in post
var dict = {
  '92173': 6,
  'C': 6,
  'GJHGWO.NAYE': 1,
  'GJHGX4.NAYE': 1,
  'GJHGX6.NAYE': 1,
  'GJHGXA.NAYE': 2,
  'GJHGXC.NAYE': 1,
  'RBD': 10,
  'RBD3': 2,
  'SAMBORNSiPOSSSTHRa': 2,
  'SAMBORNSiPOSSSTHRa1': 2,
  'SAMBORNSiPOSSSTHRa2': 2,
  'X': 4,
  'X3': 2
};

var tableHTML = 
  '<table>' + // open table
    '<thead>' + // open table header
      '<tr><td>Word</td><td>Frequency</td></tr>' + // headings
    '</thead>' + // close table header
    '<tbody>'; // open table body

// iterate through dictionary
for (var value in dict) {
  tableHTML += '<tr><td>'; // open row and "value" cell
  tableHTML += value; // append the "value"
  tableHTML += '</td><td>'; // close "value" cell and open "frequency" cell
  tableHTML += dict[value]; // append the "frequency"
  tableHTML += '</td></tr>'; // close "frequency" cell and row
}

tableHTML += 
    '</tbody>' + // close table body
  '</table>'; // close table

$('#dynamictable').append(tableHTML);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="dynamictable"></div>

I hope that helps.

Comments