获取json格式的Table数据

Question

大家好，我正在尝试获取 json 格式的表格数据，这是我的表格

   <table>
  <thead>
    <tr>
      <th>srno</th>
      <th>name</th>
      <th>email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Jhon One</td>
      <td>Doe one</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jhon two</td>
      <td>Doe Two</td>
    </tr>
  </tbody>
</table>

<button>
  convert
</button>

我得到的结果是这样的

{
    "0": {
        "1",
        "Jhon One",
        "Doe one"
    }
    ,
    "1": {
        "2",
        "Jhon two",
        "Doe Two"
    }
}

使用下面的javascript

$("button").click(function() {
  var json = html2json();
  alert(json);
});

function html2json() {
  var json = '{';
  var otArr = [];
  // var i = 1;
  var tbl2 = $('table tbody tr').each(function(e) {
    x = $(this).children();
    var itArr = [];
    x.each(function() {
      itArr.push('"' + $(this).text() + '"');
    });
    otArr.push('"' + e + '": {' + itArr.join(',') + '}');
  })
  json += otArr.join(",") + '}'

  return json;
}

但我想为每个值添加键，并且数字应该从一开始而不是零。

我有一组欲望结果，它应该看起来像这样 任何帮助表示赞赏

  {
        "1": {
           no: "1",
           name:"Jhon One",
           lastname "Doe one"
        }
        ,
         "2": {
           no: "1",
           name:"Jhon two",
           lastname "Doe two"
        }

    }

这是我尝试过的fiddel链接

https://jsfiddle.net/k228n2bn/

Answer 1

也许您可以使用 theads 作为生成对象的键。 检查this jsfiddle。

function html2json() {
  var $table = $('table');
  var $ths = $table.find('thead>tr>th');
  var rows = {};
  $table.find('tbody>tr').each(function () {
    var row = {};
    $(this).children().each(function (index) {
      row[$ths[index].textContent] = this.textContent;
    });
    rows[row.srno] = row;
  });
  return JSON.stringify(rows);
}

Answer 2

试试e+1

更改otArr.push('"' + e + '": {' + itArr.join(',') + '}');

到
otArr.push('"' + (e+1) + '": {' + itArr.join(',') + '}');

$("button").click(function() {
  var json = html2json(); 
});

function html2json() {
  var json = '{';
  var otArr = [];
   
  var tbl2 = $('table tbody tr').each(function(e) {
    x = $(this).children();
    var itArr = [];
    x.each(function(e) {
   
      var items='';
       if(e == 0){
          items +='no : "'+ $(this).text()+'"';
          
       } 
       if(e == 1){
          items +='name : "' +$(this).text()+'"'; 
       }
       if(e == 2){
          items +='email : "' +$(this).text()+'"'; 
       }
       
       itArr.push(items);
       
    });
   
    otArr.push('"' + (e+1) + '": {' + itArr.join(',') + '}');
  })
  json += otArr.join(",") + '}'
alert(json);
  return json;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th>srno</th>
      <th>name</th>
      <th>email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Jhon One</td>
      <td>Doe one</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jhon two</td>
      <td>Doe Two</td>
    </tr>
  </tbody>
</table>

<button>
  convert
</button>

Answer 3

您可以将e 转换为数字，然后像在this fiddle 中一样添加一个数字。

function html2json() {
  var json = '{';
  var otArr = [];
  // var i = 1;
  var tbl2 = $('table tbody tr').each(function(e) {
    x = $(this).children();
    var itArr = [];
    x.each(function() {
      itArr.push('"' + $(this).text() + '"');
    });
    otArr.push('"' + (Number(e) + 1) + '": {' + itArr.join(',') + '}');
  })
  json += otArr.join(",") + '}'

  return json;
}

您返回的 json 无效。如果可以的话，您可能想做this fiddle 之类的事情来简化和确保有效的 json 并从任何表结构创建对象。

function html2json() {   
  var otArr = [];
  var tblHeaders = Array.from($('table thead tr')
    .children())
    .map(header => $(header).text());  
  var tbl2 = $('table tbody tr').each(function(e) {        
    const values = Array.from($(this).children());
    const row = {};
    for (let i = 0; i < tblHeaders.length; i++){        
        row[tblHeaders[i]] = $(values[i]).text();
    }
    otArr.push({
        [e+1]: row
    })      
  })
  json = JSON.stringify(otArr);  
  return json;
}

Answer 4

只需更改以下行

otArr.push('"' + e + '": {' + itArr.join(',') + '}');

到

otArr.push('"' + (e+1) + '": {' + itArr.join(',') + '}');

括号会将值添加为数字而不是字符串。

另外，为内部对象键添加 keys 数组。

function html2json() {
   var json = '{';
   var otArr = [];
  // var i = 1;
   var tbl2 = $('table tbody tr').each(function(e) {        
      x = $(this).children();
      var itArr = [];
      var keys = ['no','name','lastname'];
      x.each(function(i) {
         itArr.push('"' + keys[i] + '":"' + $(this).text() + '"');
      });
      otArr.push('"' + (e+1) + '": {' + itArr.join(',') + '}');
   })
   json += otArr.join(",") + '}'

   return json;
}