Question

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

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"},]

这是一张很棒的桌子。
这是我的桌子样子

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

    </div>   
</div>

Answer 1

尝试将对象转换为String时，它将返回[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>';
});

Answer 2

您应该使用JSON.stringify（），因为如果row[colName]是and对象，并且您尝试使用连接string + object = string将此对象转换为字符串，但是每个对象都隐式转换为字符串{{1} }。只需使用：

object.toString() == [object Object]

如何修复[对象，对象]

2 个答案: