javascript - 如何将字典的元素分配给jquery表？

Question

我正在编写一个网页来分析文本，格式如下:

"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"

如果我在我的文本区域中复制这样的文本，我的网页会对其进行着色，它效果很好，但是当我尝试使用我正在使用的数组的值构建一个表时，问题就出现了，如下所示:

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

如果我使用:

console.log(dict);

通过上面的表格我得到:

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

我想显示一个包含该字典值的表格，第一列中应显示单词，然后在第二列中显示频率，如下所示:

Word   Frecuency
92173   6
RBD     10
X       4
.
.
.

我尝试构建一个表格来显示这些值，如下所示:

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

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

但是我不知道如何动态地将字典的值附加到表中，我想感谢任何完成此任务的建议或建议，为了更清楚我提供了以下jsfiddle: https://jsfiddle.net/adolf33/12bkgd4q/60/

Answer 1

一种简单的方法是在附加到 DOM 之前构建整个表并填充数据。大致如下:

// 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 new 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>

希望对您有所帮助。