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

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

mike92117mike92117 Posts: 15Questions: 4Answers: 0

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"}]}

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 6,954Questions: 22Answers: 1,510
    Answer ✓

    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

  • mike92117mike92117 Posts: 15Questions: 4Answers: 0

    Thank you so much! That worked perfectly!

Sign In or Register to comment.