javascript - 如何修复[对象，对象]

Question

嗨，我是 json 和 javascript 的新手。
我在这个网站找到了使用json数据作为表格的方法。
我很好奇为什么当我尝试使用 json 数据作为表时，我得到 [Object,Object]
在我的 json 中有一个多维，它并不总是这样。也许它看起来很简单，也许它看起来越来越多维。

function json2table(json, classes) {
          var cols = Object.keys(json[0]);

          var headerRow = '';
          var bodyRows = '';

          classes = classes || '';

          function capitalizeFirstLetter(string) {
            return string.charAt(0).toUpperCase() + string.slice(1);
          }

          cols.map(function(col) {
            headerRow += '<th>' + capitalizeFirstLetter(col) + '</th>';
          });

          json.map(function(row) {
            bodyRows += '<tr>';

            cols.map(function(colName) {
              bodyRows += '<td>' + row[colName] + '</td>';
            })

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

          return '<table class="' +
                 classes +
                 '"><thead><tr>' +
                 headerRow +
                 '</tr></thead><tbody>' +
                 bodyRows +
                 '</tbody></table>';
        }




var defaultData = [
  {
    "scan01": "asd",
    "scan02": "female",
    "scan04": 2,
    "scan03": "asd",
    "Q1": {
      "Q1_Quality": "Neutral",
      "Q2_Quality": "Somewhat Agree",
      "Q3_Quality": "Neutral",
      "Q4_Quality": "Neutral"
    },
    "Q2": {
      "Row 1": "item2",
      "Row 2": "item3",
      "Row 4": "item2",
      "Row 5": "item3",
      "Row 7": "item2",
      "Row 8": "item3"
    },
    "Q3": {
      "Row 1": "item3",
      "Row 2": "item4"
    },
    "Q4": "yyyyyyyyyy"
  },
  {
    "scan01": "sad",
    "Q1": {
      "Q1_Quality": "Neutral",
      "Q2_Quality": "Neutral",
      "Q3_Quality": "Somewhat Disagree",
      "Q4_Quality": "Somewhat Disagree"
    },
    "Q2": {
      "Row 1": "item2",
      "Row 2": "item2",
      "Row 4": "item2",
      "Row 5": "item2"
    },
    "Q3": {
      "Row 2": "item3"
    },
    "scan02": null,
    "scan03": null,
    "scan04": null,
    "Q4": null
  }
];

        document.getElementById('tableGoesHere').innerHTML = json2table(defaultData, 'table');

但是如果我的 json 就像这样

var defaultData = [{"Q1":"Male","Q5":"Thailand","Q2":"P1","Q3":11,"Q4":"P1@hotmail.com","Q6":"P1","Q7":"p1"},] 

它返回了一张很棒的 table 。
这是我的 table 的样子

<div class="table table-responsive">
    <div id="tableGoesHere" class="table-bordered col-md-12">

    </div>   
</div>

Answer 1

当尝试将对象转换为字符串时，它返回[Object Object]。为此，您应该使用 JSON.stringify() 。更改代码的以下部分

json.map(function(row) {
     bodyRows += '<tr>';
     cols.map(function(colName) {
          //this line is edited
          bodyRows += '<td>' + JSON.stringify(row[colName]) + '</td>';
     })

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