Iterating over aaData of Objects

hetman311

HTML:

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/t/bs-3.3.6/jq-2.2.0,dt-1.10.11/datatables.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/t/bs-3.3.6/jq-2.2.0,dt-1.10.11/datatables.min.js"></script>
<table id="dTExample" class="display" cellspacing="0" width="100%">
                            <thead>
                                <tr>
                                    <th>Account #</th>
                                    <th>Customer #</th>
                                    <th>Customer Name</th>
                                    <th>Location</th>
                                    <th>Address</th>
                                    <th>Product</th>
                                </tr>
                            </thead>
                        </table>

JS:

function populateData(table) {
        var aTable;
        aTable = $(table).dataTable({
            sAjaxSource: 'SamplePage.aspx',
            fnServerData: function (sSource, aoData, fnCallback) {
                JsonLoader("SamplePage.aspx/GetServiceLookupList", "{'idType': 'an', 'idValue': '123'}", fnCallback);
            },
            columns: [
              { data: "billAccountNumber" },
              { data: "customerNumber" },
              { data: "customerName" },
              { data: "serviceLocationName" },
              { data: "serviceLocationAddress" },
              { data: "serviceComponentProductName" }
            ]
        });
    }

    function JsonLoader(url, data, fnCallback) {
        $.ajax({
            type: "POST",
            url: url,
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            data: data,
            success: function (result) {
                var objAjax = JSON.parse(result.d);
                fnCallback(objAjax);
            },
            error: function (err, ajaxOptions, thrownError) {
                //Error
            }
        });
    }

Returned JSON:

{
  "iTotalRecords": 100,
  "iTotalDisplayRecords": 100,
  "aaData": [
    {
      "billAccountName": "FAKE CORP",
      "customerNumber": "123",
      "customerName": "Fake",
      "serviceLocationName": "Fake Corp",
      "serviceLocationAddress": "PO BOX 123 Denver CO",
      "serviceComponentProductName": "Product X"
      },
      {
      "billAccountName": "REAL CORP",
      "customerNumber": "456",
      "customerName": "Real",
      "serviceLocationName": "Real Corp",
      "serviceLocationAddress": "PO BOX 456 Ft Collins CO",
      "serviceComponentProductName": "Product Z"
      }, [...] }

So basiclly aaData is an array of 100 objects, each of which has a "billAccountName". When I run my code, the number of records on the table is showing up correctly, but the table is empty. Not sure how to go about iterating all of these objects and mapping their respective field names to the table. Please help.

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

allan

That looks like it should work to me, even although it is using the legacy fnServerData and sAjaxSource options (I would suggest using ajax if you can).

Can you link to the page showing the issue so I can help to debug it please.

Allan