create json object from html table using selected colums using jquery

Question

i was wondering how to parse html table to get json object that i can send via $.post with jquery.

i have a table

<table id="Report">
 <thead>
  <tr>
   <th>Kod</th>
   <th>Nazwa</th>
   <th>Ilość</th>
   <th>Netto / 1szt.</th>
   <th>Suma brutto</th>
  </tr>
 </thead>
<tbody>
 <tr>
  <td>00171 </td>
  <td>SŁUP 50/1800 POŚREDNI(P) </td>
  <td>5</td><td>97.00 PLN </td>
  <td>394.31 PLN </td>
 </tr>
 <tr>
  <td>00172</td>
  <td>SŁUP 50/1800 NAROŻNY(P)</td>
  <td>1</td><td>97.00 PLN</td>
  <td>78.86 PLN</td>
 </tr>
 <tr>
  <td>00173 </td>
  <td>SŁUP 50/1800 KOŃCOWY(P) </td>
  <td>1</td><td>97.00 PLN </td>
  <td>78.86 PLN</td>
 </tr>
</tbody>
<tfoot style="font-weight: bold;">    
 <tr>
  <th colspan="3" style="text-align: right;">Razem netto: 1955.85 PLN</th>
  <th colspan="2" style="text-align: right;">Razem brutto: 2405.69 PLN</th>
 </tr>
 </tfoot>
</table>

and what i need is json object in this format (first <td> and third <td>):

[{"00171":5},
 {"00172":1},
 {"00173":1}
]

and that i can send it via

$.post(  
 "print.php",  
 {json: myjsonvar},  
 "json"  
);

any idea how to do that?

thanks

Kevin Ennis · Accepted Answer · 2012-06-15 00:46:55Z

6

var json = [];
$('#Report').find('tbody tr').each(function(){
    var obj = {},
        $td = $(this).find('td'),
        key = $td.eq(0).text(),
        val = parseInt( $td.eq(2).text(), 10 );
    obj[key] = val;
    json.push(obj);
});

edited Jun 15, 2012 at 0:46

answered Jun 15, 2012 at 0:41

Kevin Ennis

14.5k2 gold badges46 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

gerpaick Over a year ago

thanks, i didnt know that it was so easy. many solutions are really similiar but your anser gives also val as an integer. thanks again

Ratul Over a year ago

obj.key is more preferable than obj[key]

Kevin Ennis Over a year ago

key is not the name of a property, it is a variable whose value is the name of a property. So if you try to use obj.key you get the value of a property on obj named key, which will be undefined. Instead, you need to use obj[ key ].

broesch · Accepted Answer · 2012-06-15 00:41:46Z

3

How about:

var myjsonvar=[];

$('#Report tbody tr').each(function(){
   var data={};
   var tr=$(this);
   data[tr.find('td:first-child').text()]=tr.find('td:nth-child(3)').text();
   myjsonvar.push(data);
});

answered Jun 15, 2012 at 0:41

broesch

2,4581 gold badge20 silver badges10 bronze badges

Comments

mVChr · Accepted Answer · 2012-06-15 00:46:25Z

2

var sendData = [];

$('#Report tbody tr').each(function(i, el){
    var key = $.trim($(this).find('td:eq(0)').text()),
        val = $.trim($(this).find('td:eq(2)').text()),
        obj = {};
    obj[key] = val;
    sendData.push(obj);
});

See demo

answered Jun 15, 2012 at 0:46

mVChr

50.3k11 gold badges111 silver badges105 bronze badges

Comments

d_inevitable · Accepted Answer · 2012-06-15 00:48:53Z

2

Why json, if you are in js already? Just create a simple object:

var data = {};

$("#Report tbody tr").each(function() {
   data[$(this).children("td:eq(0)").text()] = $(this).children("td:eq(2)").text();
});

$.post("print.php", data);

Setting type to json in $.post defines the server response to be json, not the send data!

http://jsfiddle.net/zyCPN/

edited Jun 15, 2012 at 0:48

answered Jun 15, 2012 at 0:41

d_inevitable

4,4612 gold badges31 silver badges49 bronze badges

3 Comments

gerpaick Over a year ago

thanks for you reply. i asked for json object because in my php code i had already some part for parsing json objects, so it would be a little easier for me.

d_inevitable Over a year ago

@gerpaik, json_decode() would do that in php, however if you submit it like above you'll have $_POST being array("00171" => "5", "00172" => "1", "00173" => "1");, without any parsing necessary.

gerpaick Over a year ago

thanks for tips. really helpful. i need to check if now i can simplify my code.

The Alpha · Accepted Answer · 2012-06-15 01:01:11Z

1

var objArray=[];
$('table#Report tbody tr').each(function(i){
    var row=$(this);
    obj={};
    obj[$('td', row).eq(0).text()]=$('td', row).eq(2).text();
    objArray.push(obj);
});

answered Jun 15, 2012 at 1:01

The Alpha

147k30 gold badges294 silver badges313 bronze badges

Collectives™ on Stack Overflow

create json object from html table using selected colums using jquery

5 Answers 5

3 Comments

Comments

See demo

Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

Comments

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related