CODEWITHSUNDEEP
javascriptjqueryarraysajaxsorting
aCarella
aCarella

Reputation: 2578

Building and resorting a multidimensional array with AJAX/Javascript/jQuery

I have a multidimensional array that is built in a jQuery AJAX call when my page loads, called sumArr.

$( document ).ready( function() {

  ...

  $.ajax({
    type: 'GET',
    url: 'models/table.php',
    mimeType: 'json',
    success: function(data) {
        var sumCount = 0;
        var sumArr = [];
        $( "#sum-body" ).empty(); 
        $.each(data, function(i, data) {
            sumArr.push([
                    data[0],
                    data[1],
                    data[2],
                    data[3],
                    data[4],
                    data[5],
                    data[6],
                    data[7],
                    data[8],
                    data[9]
                ]);

            var body = "<tr class='clickable-row'>";
            body    += "<td>" + data[0] + "</td>";
            body    += "<td>" + data[1] + "</td>";
            body    += "<td>" + data[2] + "</td>";
            body    += "<td>" + data[3] + "</td>";
            body    += "<td>" + data[4] + "</td>";
            body    += "<td>" + data[5] + "</td>";
            body    += "<td>" + data[6] + "</td>";
            body    += "<td>" + data[7] + "</td>";
            body    += "<td>" + data[8] + "</td>";
            body    += "<td>" + data[9] + "</td>";
            body    += "</tr>";
            $( body ).appendTo( $( "#sum-body" ) );

            sumCount = sumCount + 1;
        });

        console.log(sumArr);
  });

  ...

});

I have another function that then tries to re-sort the array. I will eventually display the array on my HTML page.

function compareCols(arr, cols) {
  arr.sort(function (a, b) {
    console.log("comparing " + a[cols] + ", " + b[cols]);
    if (a[cols] > b[cols]) {
        return 1;
      }
      if (a[cols] < b[cols]) {
        return -1;
      }

      return 0;
  });
}

compareCols('sumArr', 0);
console.log(sumArr);

When my page loads, I get the following error:

Uncaught TypeError: arr.sort is not a function

This is baffling, because I have a much simpler version of this code as an example that works fine. See below:

var items = [
  ['Edward', 21],
  ['Sharpe', 37 ],
  ['And', 45 ],
  ['The', -12 ],
  ['Magnetic', 0 ],
  ['Zeros', 37 ]
];

function compareCols(arr, cols) {
  arr.sort(function (a, b) {
    console.log("comparing " + a[cols] + ", " + b[cols]);
    if (a[cols] > b[cols]) {
        return 1;
      }
      if (a[cols] < b[cols]) {
        return -1;
      }

      return 0;
  });
}

compareCols(items, 0);
console.log(items);

I can't seem to find where this code is going wrong. Can anyone spot where the error is? I've combed through the code and can't find anything. I'm guessing it has something to do with AJAX, but don't know for sure. I originally had my array as an object, but changed it to an array or arrays.

Upvotes: 0

Views: 32

Answers (1)

Will
Will

Reputation: 1768

Two issues here:

  1. When calling compareCols('sumArr', 0); should remove the quotes as suggest by kurt in the comments.
  2. But the bigger problem is that the sumArr may not be defined as your global variable.
  3. You need to call the compareCols only after a successful ajax call.
  4. Make sure you remove the var in the ajax section so the sumArr = [] refers to the global variable.

Upvotes: 1

Related Questions