以json格式获取表数据

Hello everyone I'm trying to get table data in json format here is my table

大家好,我正在尝试以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>

the result which i am getting is this

我得到的结果就是这个

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

using the below javascript

使用下面的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;
}

but i want to add key to every value and the number should start from one and not zero.

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

i have a set of desire result and it should look like this any help is appreciated

我有一套渴望的结果,它应该看起来像任何帮助表示赞赏

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

    }

here is the fiddel link which i have tried

这是我尝试过的fiddel链接

https://jsfiddle.net/k228n2bn/

4 个解决方案

#1

Just change the following line

只需更改以下行

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

to

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

The parenthesis will add the values as numbers not strings.

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

Also, add keys array for internal object 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;
}

#2

You can convert e to a Number and add one to it like in this fiddle.

您可以将e转换为数字,然后像在这个小提琴中一样添加一个。

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;
}

The json you're returning is not valid though. You may want to do something like this fiddle if you can to simplify and ensure valid json and to create your objects from any table structure.

你回来的json虽然无效。如果您可以简化并确保有效的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;
}

#3

Try e+1

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

改变otArr.push('“'+ e +'”:{'+ itArr.join(',')+'}');

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

to 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>

#4

Maybe you can use theads as keys for the generated objects. Check this jsfiddle.

也许你可以使用theads作为生成对象的键。检查这个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);
}