Constructing JSON with JQuery from a table

Question

I am trying to construct the following JSON within JQuery with a editable table but I don't know where should I begin, since my heading, the number of boarding zone(columns) and the number of route serial(rows) changes all the time, therefore I have to manually pull out the data and construct the JSON per row. Thank you in advances for any comment and reply.

{  "name": txtRouteName.val(),
  "serial": [
    { "rsn": "X100", "boardingzone": [
      { "name": "Foo", "time": "8:00" },
      { "name": "Bar", "time": "8:15"}
    ] },
    { "rsn": "X101", "boardingzone": [
      { "name": "Foo", "time": "9:00" },
      { "name": "Bar", "time": "9:15"}
    ] }
  ] 
};

where the table are displayed as follow:

<table id="table1">
   <tr>
   <td>RSN</td>
       <td>Foo</td>
       <td>Bar</td>
   </tr>                        
  <tr>
      <td>X100</td>
      <td>8:00</td>  
      <td>8:15</td>
  </tr>
  <tr>
      <td>X101</td>
      <td>9:00</td>  
      <td>9:15</td>
  </tr>
</table>

Linus Thiel · Accepted Answer · 2012-02-18 11:39:17Z

1

First off, I suggest you use th for your table headings:

<table id="table1">

   <tr>
       <th>RSN</th>
       <th>Foo</th>
       <th>Bar</th>
   </tr>

Then you could:

function parseTable(table) {
    // Helper function to extract the text content of a cell
    function getText(i, cell) { return $(cell).text().trim() };

    // Get the text of the headings as an array
    var headings = $(table).find('tr:eq(0)').find('th').map(getText);

    // Get the text of the values as an array of arrays (values in rows)
    var values = $(table).find('tr:gt(0)').map(function(i, row) {
        return $(row).find('td').map(getText);
    });

    // Map the data according to these rules:
    // One object per row, with `boardingzone` keeping an array of the values
    var result = $.map(values, function(row) {
        var obj = {};
        obj[headings[0]] = row[0];
        obj.boardingzone = $.map(row.slice(1), function(value, i) {
            return {
                name: headings[i + 1],
                time: value
            }
        });
        return obj;
    });

    return result;
}
console.log(JSON.stringify(parseTable("#table1")));

answered Feb 18, 2012 at 11:39

Linus Thiel

39.3k9 gold badges112 silver badges104 bronze badges

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

2 Comments

Fy2C Over a year ago

Thank you for your suggestion and comment, I did a editable column with <th> before however for some random reason my heading columns won't increase in number as the drop down list value changes. For that I have changed the <th> to <td>.

Linus Thiel Over a year ago

Ok, then just change th to td in the line var headings = $(table).find('tr:eq(0)').find('th').map(getText);

elrado · Accepted Answer · 2012-02-18 11:25:14Z

1

Iterate rows and cells:

$("#table1 tr").each(function(){
         //Rows action
         $(this).children("td").each(function (){
         //Cells action
         });
});

If you are in the first row then there are field names. if you are in the first cell of row you're reading rsv, otherwise youre reading boardingzone.

edited Feb 18, 2012 at 11:25

answered Feb 18, 2012 at 11:18

elrado

5,3321 gold badge19 silver badges15 bronze badges

1 Comment

Fy2C Over a year ago

I thought of that but I don't really know how to extend my rsn into the serial array with the boarding zone array in the serial array

Collectives™ on Stack Overflow

Constructing JSON with JQuery from a table

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related