I'm basically a javascript/html noob, please bear with me. Previously, I created an html table with jinja2. The row values were from a list of python key - value dictionary i.e.

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 %}

which renders the column details as expected:

Currently, I'm working with ajax and want to create a similar table with jquery, but the values are not being parsed correctly:

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

the cells with the dict e.g. {"category": "categoryC","state": "ny", "count": 3} is rendered on the html table as [object Object]:

How to render such dictionary as values when creating the html table in JQuery?

I'm basically a javascript/html noob, please bear with me. Previously, I created an html table with jinja2. The row values were from a list of python key - value dictionary i.e.

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 %}

which renders the column details as expected:

Currently, I'm working with ajax and want to create a similar table with jquery, but the values are not being parsed correctly:

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

the cells with the dict e.g. {"category": "categoryC","state": "ny", "count": 3} is rendered on the html table as [object Object]:

How to render such dictionary as values when creating the html table in JQuery?

• javascript
• jquery
• html

4 Answers 4

You must use JSON.stringify() to display like string

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

To get the same text representation of the object as before, try JSON.stringify(row)

[object Object] is caused by a program outputting Object.prototype.toString() somewhere, you should use JSON.stringify() to make the objects appear as they shoudl:

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

let html;

html += '<tr>'

$.each(rows, function(idx, row) {
  html += "<td>" + JSON.stringify(row) + "</td>"

})
html += '</tr>';

        data = [{
            "name": "categoryA",
            "value": "west",
            "prop_type": 2
          },
          {
            "name": "categoryB",
            "value": "east",
            "prop_type": 3
          },
          {

            "name": "categoryC",
            "value": "ny",
            "prop_type": 3
          }
        ]


        object = JSON.parse(data),
                    array = Object.keys(object).map(function(k) {
                        return object[k];
                    });
                   var mainObj = array;
                   var k = '<tbody>'
                   for(i = 0;i < mainObj.length; i++){
                       k+= '<tr class="info">';
                       k+= '<td>' + mainObj[i].name + '</td>';
                       k+= '<td>' + mainObj[i].value + '</td>';
                       k+= '<td>' + mainObj[i].prop_type + '</td>';
                       k+= '</tr>';
                   }
                   k+='</tbody>';
                   document.getElementById('tableData').innerHTML = k;

<table>
 <tbody id="tableData"></tbody>
 </table>