How do I display data if that data is a nested object of the returned data?

mike92117

So I have an ajax call that is returning data that contains two objects at the root. One is LastRefresh which is just the number of ticks and I'm not using it with my DataTable but I am using elsewhere. The other is a list of strings (SKUs) which I want to display in a DataTable. The data comes back fine but I haven't been successful yet in having datatables use the nested object called SKUs.

          fbaSKUTable = $('#fbaSKUs').DataTable({
                ajax: {
                    'url': '/api/FBA/RefreshSKUS',
                    'dataSrc': 'skuData',
                    'type': 'GET',
                    'success': function (data) {
                        skuData = JSON.stringify(data.SKUs);
                        storage.setItem("lastRefresh", JSON.stringify(data.LastRefresh));
                        storage.setItem("fbaSKUs", JSON.stringify(data.SKUs));
                    },
                    'failure': function (data) {
                        console.log('failure');
                    }
                },
                "columns": [
                    {"SKU": "SKU"}
                ]
            });

Here is some sample data

{"LastRefresh":"636826452200968391","SKUs":[{"SKU":"AB-BROWN"},{"SKU":"ZAR-FEO1"},{"SKU":"ZZZ-FROST"}]}

kthorngren

Just to make it easier to see here is the data:

{
    "LastRefresh": "636826452200968391",
    "SKUs": [{
        "SKU": "AB-BROWN"
    }, {
        "SKU": "ZAR-FEO1"
    }, {
        "SKU": "ZZZ-FROST"
    }]
}

You have a few config issues.

1. According to the ajax option the success function should not be used but instead the ajax.dataSrc can be used in its place.
2. I don't believe there is a failure function to jQuery Ajax. I believe you want to use the error function.
3. The JSON response doesn't have a skuData object. You will want to use SKUs instead, for example dataSrc: "SKUs".
4. Using {"SKU": "SKU"} in the columns config is not a valid option. You are to use the columns.data option, for example: {"data": "SKU"}.

I haven't tested this so some adjustments may need to be made but I think you will want something more like this:

fbaSKUTable = $('#fbaSKUs').DataTable({
      ajax: {
          'url': '/api/FBA/RefreshSKUS',
          'type': 'GET',
          'dataSrc': function (data) {
              storage.setItem("lastRefresh", JSON.stringify(data.LastRefresh));
              storage.setItem("fbaSKUs", JSON.stringify(data.SKUs));
              return data.SKUs;
          },
          'error': function (data) {
              console.log('failure');
          }
      },
      "columns": [
          {"data": "SKU"}
      ]
  });

Kevin

mike92117

Thank you so much! That worked perfectly!