post data from table row like json format

Question

this is related to my last question( NOTE: I already got some good answers there). I'm doing a program that will filter. I didn't include this question because i thought that it is easier for me to add text as long as i know how to get the data from the row. But to my dismay, I wasn't able to code a good program til now.

Im currently using this javascript code (thanks to Awea):

$('#out').click(function(){    
   $('table tr').each(function(){
      var td = '';
      $(this).find('option:selected').each(function(){
         td = td + ' ' + $(this).text();
      });
      td = td + ' ' + $(this).find('input').val();
      alert(td);
   });
})

my question is: How to add text before the data from the row? like for example, this code alert the first row like data1.1 data1.2 data1.3,

then the second row like data2.1 data2.2 data2.3,

I want my output to be displayed like this

[ {"name":"data1.1","comparison":"data1.2", "value":"data1.3"}, {"name":"data2.1","comparison":"data2.2", "value":"data2.3"}, {"name":"data3.1","comparison":"data3.2", "value":"data3.3"} {.....and so on......}]

but before that happen, i want to check if all the FIRST cell in a row is not empty. if its empty, skip that row then proceed to next row.

is there somebody can help me, please...

You should add the JQuery tag, since that is a library outside of javascript itself. — Benbob, May 05 '11 at 04:46

score 5 · Accepted Answer · edited May 23 '17 at 10:34

Building on my answer to your previous question, see http://jsfiddle.net/evbUa/1/

Once you have your data in a javascript object (dataArray in my example), you can write the JSON yourself, per my example, but you will find it much easier to use a library such as JSON-js (see this also).

// object to hold your data
function dataRow(value1,value2,value3) {
    this.name = value1;
    this.comparison = value2;
    this.value = value3;
}

$('#out').click(function(){   

    // create array to hold your data
    var dataArray = new Array();

    // iterate through rows of table
    for(var i = 1; i <= $("table tr").length; i++){

        // check if first field is used
        if($("table tr:nth-child(" + i + ") select[class='field']").val().length > 0) {

            // create object and push to array
            dataArray.push(    
                new dataRow(
                    $("table tr:nth-child(" + i + ") select[class='field']").val(),
                    $("table tr:nth-child(" + i + ") select[class='comp']").val(),
                    $("table tr:nth-child(" + i + ") input").val())
            );
        }

    }

    // consider using a JSON library to do this for you
    for(var i = 0; i < dataArray.length; i++){
        var output = "";
        output = output + '{"name":"data' + (i + 1) + '.' + dataArray[i].name + '",';
        output = output + '"comparison":"data' + (i + 1) + '.' + dataArray[i].comparison + '",';
        output = output + '"value":"data' + (i + 1) + '.' + dataArray[i].value + '"}';
        alert(output);
    }
})

Benbob · Answer 2 · 2011-05-05T06:01:30.363

2

There are two things you need to do here. First get the data into an array of objects, and secondly get the string representation.

I have not tested this, but it should give you a basic idea of what to do.

Edit Please take a look at this JS-Fiddle example I've made. http://jsfiddle.net/4Nr9m/52/

$(document).ready(function() {
    var objects = new Array();
    $('table tr').each(function(key, value) {
        if($(this).find('td:first').not(':empty')) {
        //loop over the cells
        obj = {};
        $(this).find('td').each(function(key, value) {
                var label = $(this).parents('table').find('th')[key].innerHTML;
                obj[label] = value.innerHTML;

        });
        objects.push(obj);

        }
    });
    //get JSON.
    var json = objects.toSource();
    $('#result').append(json);
});

edited May 05 '11 at 06:01

answered May 05 '11 at 04:45

Benbob

13,876
18
79
114

hey, thank you for this one. By the way, your link doesn't show the result. I only copy and paste the above code to show the result. And also, it doesn't skip the row if the first cell is empty. And one more thing, how to get the empty'{}' before the first row?.. thank you again for the idea and the answer. – jayAnn May 05 '11 at 07:12
Sorry, I have no idea how it gets the blank object. Maybe you can debug it (with break points)on your site and with firefox and you'll see. It's difficult to debug jsfiddle. – Benbob May 05 '11 at 07:59
Here you go. Needed `JSON.stringify()` and `.not(':empty').length > 0` http://jsfiddle.net/4Nr9m/59/ – Benbob May 05 '11 at 08:14
@Keyo. hey, thanks fort this one. one more question. I'm using select tag and textbox. I want to get and displays only the selected value. How can i do that. – jayAnn May 05 '11 at 08:49
Try `obj[label] = $(value).find(':input')[0].val();`. There are plenty of docs around and you can just google `get input element value jquery` or something like that and find the methods you need to use. – Benbob May 05 '11 at 09:45

druveen · Answer 3 · 2011-05-05T07:13:28.970

2

var a = []; a[0] = "data1.1 data1.2 data1.3" a[1] = "data1.6 data1.2 data1.3" var jsonobj = {}; var c = [] for (var i = 0;i

alert(c); //it will give ["{"name":"data1.1","comp...1.2","value":"data1.3"}", "{"name":"data1.6","comp...1.2","value":"data1.3"}"]

u have to include library for function from JSON.stringify from https://github.com/douglascrockford/JSON-js/blob/master/json2.js

hope this helps

edited May 05 '11 at 07:13

answered May 05 '11 at 07:01

druveen

1,611
3
15
32

thanks for the answer but it wont give good output if my data contains spaces. Maybe i just have to replace the split(' ') to (,). But thank you for the giving me an idea. – jayAnn May 05 '11 at 08:46
hey, it's working now... I did change your split(' ') to (,). thank you again. – jayAnn May 05 '11 at 09:16

post data from table row like json format

3 Answers3

Linked