CODEWITHSUNDEEP
jqueryjsonloops
Angelo
Angelo

Reputation: 427

populate json object from table

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

Upvotes: 0

Views: 739

Answers (4)

user2466202
user2466202

Reputation: 1205

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

Upvotes: 2

Khawer Zeshan
Khawer Zeshan

Reputation: 9646

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

Upvotes: 1

wahwahwah
wahwahwah

Reputation: 3177

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>

Upvotes: 1

Hy L
Hy L

Reputation: 592

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();

Upvotes: 0

Related Questions