Convert HTML table in to JavaScript Object

Question

I am tring to convert the html table data into something like this: jsFiddle Demo

[{
    name: 'Week 1',
    data: [33.95, 40.68]},
{
    name: 'Week 2',
    data: [11.99, 16.66]},
{
    name: 'Week 3',
    data: [1.96, 0.93]},
{
    name: 'Week 4',
    data: [0, 1.21]}]

Method I am using:

var Consolelog = $('table tbody tr').map(function() {

    var $row = $(this);
    return {
        name: $row.find(':nth-child(1)').text(),
        data: $('td:not(:nth-child(1))', this).each( function(){

            $(this).text();

        })
    };


}).get();

console.log(Consolelog);
alert(Consolelog.toSource());

But, this give me something like this:

[{
    name: "Some Data 1 ",
    data: {
        length: 4,
        prevObject: {
            0: ({}),
            context: ({}),
            length: 1
        },
        context: ({}),
        selector: "td:not(:nth-child(1))",
        0: ({}),
        1: ({}),
        2: ({}),
        3: ({})
    }},
{
    name: "Some Data 1 ",
    data: {
        length: 4,
        prevObject: {
            0: ({}),
            context: ({}),
            length: 1
        },
        context: ({}),
        selector: "td:not(:nth-child(1))",
        0: ({}),
        1: ({}),
        2: ({}),
        3: ({})
    }}]

Any suggestion what I am doing wrong?

You are doing it inversely. You set a name to first cell in a row, not first cell in a column. — avall
– avall, Commented Jul 6, 2012 at 11:41

Alex Ball · Accepted Answer · 2012-07-06 20:36:14Z

1

sorry but i've not much time to test, but this could be a way to do that:

var Consolelog = $('table th:not(:nth-child(1))').map(function(i) {

    var $th = $(this);
    var $cel = $('td:nth-child('+(i+2)+')').each(function(){
                       $(this);
                });


    return {
        name: $th.text(),
        data: $cel.text().split('%').slice(0,-1)
    };
    //console.log(return);

}).get();

//console.log(Consolelog);
alert(Consolelog.toSource());

See update Fiddle

UPDATE:

Hi, sorry for the delay, by the way to convert or to be sure that array value are number you could try this:

var Consolelog = $('table th:not(:nth-child(1))').map(function(i) {

    var $th = $(this);
    /*var $cel = $('td:nth-child('+(i+2)+')').each(function(){
                       $(this);
                });*/
    var $cel = $.map(
        $('td:nth-child('+(i+2)+')').each(function(){
                       $(this);
        }).text().split('%').slice(0,-1), function(value){
            return parseFloat(value);
        });

    return {
        name: $th.text(),
        //data: $cel.text().split('%').slice(0,-1)
        data: $cel
    };
    //console.log(return);

}).get();

//console.log(Consolelog);
alert(Consolelog.toSource());

See example Fiddle

edited Jul 6, 2012 at 20:36

answered Jul 6, 2012 at 14:42

Alex Ball

4,4842 gold badges20 silver badges23 bronze badges

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

2 Comments

Iladarsda Over a year ago

Great. 99% there. Is there any way to make sure data array is numbers / values and not a strings?

Alex Ball Over a year ago

@NewUser Hi, sorry for the delay but I was away from home, however I have updated the answer, I hope goes well

Collectives™ on Stack Overflow

Convert HTML table in to JavaScript Object

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related