javascript - Jquery 在 td 中创建带有字典条目的 html 表

Question

我基本上是一个 javascript/html 菜鸟，请多多包涵。之前，我用 jinja2 创建了一个 html 表格。行值来自 python 键值列表，即

rows = [{"category": "categoryA","region": "west", "count": 2},
        {"category": "categoryB","region": "east", "count": 3},
        {"category": "categoryC","state": "ny", "count": 3}]


{% for row in rows %}
 <tr>
  <td> {{row}} </td>
 </tr>    
{% endfor %}

按预期呈现列 details:

目前，我正在使用 ajax 并想使用 jquery 创建一个类似的表，但是值没有被正确解析:

html += '<tr>'
jQuery.each(rows, function(idx, row) {
   html += "<td>" + row + "</td>"
})
html += '</tr>';

带有字典的单元格，例如{"category": "categoryC","state": "ny", "count": 3} 在 html 表格上呈现为 [object Object]:

如何在 JQuery 中创建 html 表时将这样的字典呈现为值？

Answer 1

你必须使用JSON.stringify()来显示string

html += '<tr>'
jQuery.each(rows, function(idx, row) {
   html += "<td>" + JSON.stringify(row) + "</td>"
})
html += '</tr>';