Question

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

GSI2=data-type and GSI2SK=tis

a

这是我的目的。
我开始进行在线json解码。

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

这是示例JSON数据

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');

更多图片供我参考。

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>

我希望这会有所帮助。

如何在带有JavaScript的嵌套构建表中使用数组

1 个答案: