CODEWITHSUNDEEP
jqueryajaxarraysmultidimensional-array
Ismailp
Ismailp

Reputation: 2383

How to populate table with array in jquery?

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

Upvotes: 1

Views: 2780

Answers (2)

Yatharth Agarwal
Yatharth Agarwal

Reputation: 4564

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:

    1. 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]);

    2. Run the code to set count:

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

    3. 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) ...

Upvotes: 2

Rajat Singhal
Rajat Singhal

Reputation: 11264

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

You need to parse the data first.

Upvotes: 0

Related Questions