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: stackoverflow.com/questions/1184624/… — LouisK
– LouisK, Commented Dec 4, 2014 at 21:26

user2466202 · Accepted Answer · 2014-12-05 04:28:07Z

2

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

edited Dec 5, 2014 at 4:28

answered Dec 5, 2014 at 4:23

user2466202

1,20510 silver badges8 bronze badges

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

Comments

Khawer Zeshan · Accepted Answer · 2014-12-04 21:44:35Z

1

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

answered Dec 4, 2014 at 21:44

Khawer Zeshan

9,6568 gold badges43 silver badges63 bronze badges

Comments

wahwahwah · Accepted Answer · 2014-12-04 21:34:40Z

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>

Hy L · Accepted Answer · 2014-12-04 21:31:43Z

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 4, 2014 at 21:31

Hy L

5926 silver badges11 bronze badges

1 Comment

Angelo Over a year ago

needed to do this without the use of any plugins or external libraries besides jQuery although this is good to know for the future

Collectives™ on Stack Overflow

populate json object from table

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related