populate json object from table

Question

I have this table

<table>
  <tr>
      <th>name</th>
      <th>address</th>
      <th>city</th>
  </tr>
  <tr>
      <td data-attr="name">amy</td>
      <td data-attr="address">123 El St.</td>
      <td data-attr="city">Rossberg</td>
  </tr>

  <tr>
      <td data-attr="name">john</td>
      <td data-attr="address">232 Rosary Rd.</td>
      <td data-attr="city">Newberg</td>
  </tr>

And I am unable to find the proper way to populate a json object that looks like the following:

[{
  "name" : "amy",
  "address" : "123 El St.",
  "city" : "Rossberg"
 },
 {
  "name" : "john",
  "address" : "232 Rosary Rd.",
  "city" : "Newberg"
 }
]

What is the proper way of doing this with jquery v1.8.3?

P.S. I will be able to view the answer & accept what is used as the solution tomorrow. Thank you

This question pretty much gives you everything you need: http://stackoverflow.com/questions/1184624/convert-form-data-to-js-object-with-jquery?rq=1 — LouisK, Dec 04 '14 at 21:26

user2466202 · Answer 1 · 2014-12-05T04:28:07.170

The solution is to create an array, iterate each row of a table, create a object, and iterate through each cell, stores the data attribute and text into the created object, and eventually push that object into the array.

var mainArray = [];

$('table tr').each(function () {
    var $tds = $(this).find("td");
    var len = $tds.length;
    if (len) {
        var tempObj = {};
        for (var i = 0; i < len; i++) {
            var $td = $tds.eq(i);
            temp[$td.data("attr")] = $td.text();
        }
        mainArray.push(temp);
        tempObj = {};
    }
});

alert(JSON.stringify(mainArray));

JSFiddle

score 1 · Answer 2 · answered Dec 04 '14 at 21:34

Here's an example:

$(document).ready(function(){

    var data = [];
    var table = $('table'); // probably better if you use an id
    
    table.find('tr').each(function(i){
        if (i != 0) { // ignore header
            
            var $tds = $(this).find('td'),
            name = $tds.eq(0).text(),
            address = $tds.eq(1).text(),
            city = $tds.eq(2).text();
            
            data.push({ "name":name, "address":address, "city":city });
        }
    });
    
    var jsonPeople = JSON.stringify(data);
    alert(jsonPeople);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table>
  <tr>
      <th>name</th>
      <th>address</th>
      <th>city</th>
  </tr>
  <tr>
      <td data-attr="name">amy</td>
      <td data-attr="address">123 El St.</td>
      <td data-attr="city">Rossberg</td>
  </tr>

  <tr>
      <td data-attr="name">john</td>
      <td data-attr="address">232 Rosary Rd.</td>
      <td data-attr="city">Newberg</td>
  </tr>

score 1 · Accepted Answer · answered Dec 04 '14 at 21:44

Here you go

var counter = 1;
var mainArray = [];
var subArray = new Object();

$('.toJson').each(function(){
    var col = $(this);
     subArray[col.data('attr')] = col.html();

    if(counter == 3)
    {
        mainArray.push(subArray);
        subArray = new Object();
        counter = 0;
    }
    counter++;
});

alert(JSON.stringify(mainArray));

EXAMPLE

score 0 · Answer 4 · answered Dec 04 '14 at 21:31

0

There is a jQuery plugin to serialize HTML tables into javascript objects.

https://github.com/lightswitch05/table-to-json

All you have to do is select your table using jQuery and call the plugin:

var table = $('#table-id').tableToJSON();

answered Dec 04 '14 at 21:31

Hy L

522
5
11

needed to do this without the use of any plugins or external libraries besides jQuery although this is good to know for the future – Angelo Dec 05 '14 at 12:56

populate json object from table

4 Answers4