How to populate table with array in jquery?

Question

I have a problem I can't figure out. I have an ajax success function that loops through a multidimensional array like so:

function onSuccessClientCustomerData(data) {
    // Count length of object
    var count = 0;
    for (i in data) {
        if (data.hasOwnProperty(i)) {
            count++;
        }
    }

    // Fetch data
    var arr = new Array(data.variable0, data.variable1, data.variable2, data.variable3, data.variable4);
    for(var i = 0; i< count; i++) {
        var variable = $.parseJSON(arr[i]);

    }
}

I each arrays have three keys and I want to populate the td:eq(1) to td:eq(2) on each row:

<table id="test">
<tr>
    <td><input type="text"></td>
<td class="outputName">-</td>
    <td class="outputRating">-</td>
<td class="outputTurnover">-</td>
</tr>
<tr>
    <td><input type="text"></td>
<td class="outputName">-</td>
    <td class="outputRating">-</td>
<td class="outputTurnover">-</td>
</tr>
</table>

How do I do that. I've tried som each functions but couldn't get it to work!

Would be grateful for any help or references to read!

Thanks!

EDIT / HERE IS MY SOLUTION

function onSuccessClientCustomerData(data) {
    // Count length of object
    var count = 0;
    for (i in data) {
        if (data.hasOwnProperty(i)) {
            count++;
        }
    }

    // Fetch data
    var arr = new Array(data.variable0, data.variable1, data.variable2, data.variable3, data.variable4);
    for (var i = 0; i < count; i++) {
        var arr_j = $.parseJSON(arr[i]);
        $("#row" + i + " .key0").html(arr_j.name);
        $("#row" + i + " .key1").html(arr_j.rating);
        $("#row" + i + " .key2").html(arr_j.percentOfTotalIncome);
    }
}

Yatharth Agarwal · Accepted Answer · 2012-09-23 11:58:18Z

2

Do you need help in the part where you have to insert the values? If so:

jQuery Code

function onSuccessClientCustomerData(data) {
    // Count length of object
    var count = 0;
    for (i in data) {
        if (data.hasOwnProperty(i)) {
            count++;
        }
    }

    // Fetch data
    var arr_i = new Array(data.variable0, data.variable1, data.variable2, data.variable3, data.variable4);
    for (var i = 0; i < count; i++) {
        var arr_j = arr_i[i];
        for (var j = 0; j < arr_j. length; j++) {
            $("#row" + i + " .key" + j).html(arr_j[j]);
        }
    }
}

HTML Code

<table id="test">
  <tr id="row0">
    <td><input type="text"></td>
    <td class="key0" class="outputName">...</td>
    <td class="key1" class="outputRating">...</td>
    <td class="key2" class="outputTurnover">...</td>
  </tr>
  <tr id="row1">
    <td><input type="text"></td>
    <td class="key0" class="outputName">...</td>
    <td class="key1" class="outputRating">...</td>
    <td class="key2" class="outputTurnover">...</td>
  </tr>
</table>

Test Code

I tested the code with Chrome and it worked fine. Here are the steps to reproduce it:-

Open the Elements pane using F12 and do the following:
1. Add the HTML part to a webpage;
2. Optionally add a border and some margins to make it clearer;

Open the Web Console using Ctrl + Shift + J and do the following:

Give arr_i (we'll be using that instead of data) a placeholder value:
```
var arr_i = new Array([00, 01, 02], [10, 12, 13]);
```

Run the code to set count:

// Count length of object
        var count = 0;
        for (i in data) {
            if (data.hasOwnProperty(i)) {
                count++;
            }
       }

Use my function to add the values (be sure to run the code on a page that uses jQuery! Or else, use this bookmark):

for (var i = 0; i < count; i++) {
    var arr_j = arr_i[i];
    for (var j = 0; j < arr_j. length; j++) {
        $("#row" + i + " .key" + j).html(arr_j[j]);
    }
}

And voilà! This should probably fetch me about 20 to 30 votes ~~by today~~ ~~tomorrow~~ ~~this week~~ next year (hopefully) ...

edited Sep 23, 2012 at 11:58

answered Sep 22, 2012 at 14:37

Yatharth Agarwal

4,5803 gold badges27 silver badges55 bronze badges

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

8 Comments

Ismailp Over a year ago

Will try when I get to me my computer! Thanks!

Ismailp Over a year ago

Hey tested it now, I get this out {, ", 0 so this means it doesn't fetch the key values. Only the three first characters. Don't know why?!

Ismailp Over a year ago

Your suggestions works but I have a multidimensional array so the $.parseJSON() is needed. I tried adding it to your suggestion but that doesn't work :) At least not for me :)

Ismailp Over a year ago

I tweeeked your code some but it works perfectly! Thank you! :)

Yatharth Agarwal Over a year ago

@Ismailp Happy to help. Would you mind editing my answer to reflect the tweaks you made? It'll help future readers and I'd like to see it... :)

|

Rajat Singhal · Accepted Answer · 2012-09-22 14:22:20Z

0

function onSuccessClientCustomerData(data) {
    var data = $.parseJSON(data);
    ....
}

You need to parse the data first.

answered Sep 22, 2012 at 14:22

Rajat Singhal

11.3k5 gold badges40 silver badges57 bronze badges

1 Comment

Ismailp Over a year ago

Look at the success function. It is already parsed. I get the data but I want to know how to populate the table as described

Collectives™ on Stack Overflow

How to populate table with array in jquery?

2 Answers 2

jQuery Code

HTML Code

Test Code

8 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

jQuery Code

HTML Code

Test Code

8 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related