CODEWITHSUNDEEP
javascriptarraysjsonhtml
Manav
Manav

Reputation: 306

Get Table data in json format

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

   <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

$("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

https://jsfiddle.net/k228n2bn/

Upvotes: 1

Views: 12754

Answers (4)

F&#233;lix
F&#233;lix

Reputation: 1725

Maybe you can use theads as keys for the generated objects. Check 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);
}

Upvotes: 0

XYZ
XYZ

Reputation: 4480

Try e+1

change otArr.push('"' + e + '": {' + 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>

Upvotes: 0

sonicblis
sonicblis

Reputation: 3194

You can convert e to a Number and add one to it like in 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;
}

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.

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

Upvotes: 1

mhatch
mhatch

Reputation: 4605

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

Upvotes: 2

Related Questions