javascript - 如何使用javascript在嵌套构建表中使用数组

Question

我在将 JSON 转换为表格时遇到了一些问题，我的目的是
尝试构建表格，但我的表格看起来像这样
这是我的代码，我尝试使用 Object.Keys、Object.Values、Object.entrie，但它不起作用。

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


  var headerRow = '';
  var bodyRows = '';
  console.log(cols);
  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>';   
      if(typeof row[colName] === 'object'){       
          /*if (row[colName] !== null){

            }   */            
          bodyRows += '<td>' + JSON.stringify(row[colName]) + '</td>';
        }
        else {
            bodyRows += '<td>' + row[colName] + '</td>';
        }
    })



    bodyRows += '</tr>';

  });

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

/* How to use it */


var defaultData = JSON.parse(...); // my JSON is here from my service

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

一个

这就是我的目的。
我正在上线json decode。

我应该怎么做才能解决这个问题？

这是示例 JSON 数据

 var defaultData =    {
      "scan01": "POP",
      "scan02": "male",
      "scan03": "under13",
      "scan04": "POP",
      "Q1": {
        "Q1_Quality1": "2",
        "Q2_Quality2": "4",
        "Q4_Quality4": "1",
        "Q3_Quality3": "3"
      },
      "Q2": {
        "Q2_Restaurant2": "3",
        "Q2_Restaurant1": "3",
        "Q2_Restaurant4": "2",
        "Q2_Restaurant3": "3",
        "Q2_Restaurant5": "4",
        "Q2_Restaurant6": "4",
        "Q2_Restaurant7": "1",
        "Q2_Restaurant8": "3"
      },
      "Q3": {
        "Q3_Value1": "3",
        "Q3_Value2": "4"
      },
      "Q4": "POP"
    }

更多图片供我引用。

Answer 1

编辑:

OP 澄清后，这里是在 HTML TABLE 中输出 JSON 数据的代码:

function json2table(json, classes)
{  
  var cols = Object.keys(json);
  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>';
  });

  
  bodyRows += '<tr>';
  cols.map(function(colName) {

if (typeof json[colName] === 'object')
{
  var subCols = Object.keys(json[colName]);
  console.log(subCols);
  
  bodyRows += '<td><table border="1" style="border-color: #CCC;"><tr>';
  subCols.map(function(subcol) {
    console.log(subcol);
    bodyRows += '<td>' + capitalizeFirstLetter(subcol) + ': ' + JSON.stringify(json[colName][subcol]) + '</td>';
  });
  bodyRows += '</tr></table></td>';
  
}
else {
  bodyRows += '<td>' + JSON.stringify(json[colName]) + '</td>'; 
}
  })
  bodyRows += '</tr>';

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

/* How to use it */

//var toBeobj = ($('#sendDataTableToScript').attr('value'));
//var toBeobj = $('#sendDataTableToScript').attr('value');
//var defaultData = JSON.parse(toBeobj);

var defaultData = { "scan01": "POP", "scan02": "male", "scan03": "under13", "scan04": "POP", "Q1": {   "Q1_Quality1": "2", "Q2_Quality2": "4", "Q4_Quality4": "1", "Q3_Quality3": "3" }, "Q2": {   "Q2_Restaurant2": "3", "Q2_Restaurant1": "3", "Q2_Restaurant4": "2", "Q2_Restaurant3": "3", "Q2_Restaurant5": "4", "Q2_Restaurant6": "4", "Q2_Restaurant7": "1", "Q2_Restaurant8": "3" }, "Q3": {     "Q3_Value1": "3", "Q3_Value2": "4" }, "Q4": "POP" };

var x = json2table(defaultData, 'table');

document.getElementById('tableGoesHere').innerHTML = x;

 <div id="tableGoesHere"></div>

希望对您有所帮助。