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

Answer 1

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) …