Nested Object Data

shannonwrege

Can anyone help me with configuring datatables to handle a json packet in this format:

[
    {
        "tid": 1234,
        "name": "US Open",
        "starts": "2016-08-28",
        "ends": "2016-09-10",
        "club": "Corona Park",
        "city": "Flushing",
        "state": "NY",
        "country": "USA",
        "events": [
            {
                "eid": 1,
                "name": "Men's Open Singles",
                "results": [
                    ["F", "Wawrinka", "Djokovic", "67(7) 64 75 63"  ],
                    ["SF", "Wawrinka", "Nishikori", "46 75 64 62"],
                    ["SF", "Djokovic", "Monfils", "63 62 36 62"]
                ]
            },
            {
                "eid": 2,
                "name": "Women's Open Singles",
                "results": [
                    ["F", "Kerber", "Pliskova", "63 46 64"],
                    ["SF", "Kerber", "Wozniacki", "64 63"],
                    ["SF", "Pliskova", "Williams", "62 76(5)"]
                ]
            }
        ]
    },
    {
        "tid": 5679,
        "name": "Wimbledon",
        "starts": "2016-07-03",
        "ends": "2016-07-16",
        "club": "Wimbledon",
        "city": "London",
        "state": "",
        "country": "GBR",
        "events": [
            {
                "eid": 1,
                "name": "Men's Open Singles",
                "results": [
                    ["F", "Murray", "Raonic", "64 76(3) 76(2)"],
                    ["SF", "Murray", "Berdych", "63 63 63"],
                    ["SF", "Raonic", "Federer", "63 67(3) 46 75 63"]
                ]
            },
            {
                "eid": 2,
                "name": "Women's Open Singles",
                "results": [
                    ["F", "S. Williams", "Kerber", "75 63"],
                    ["SF", "S. Williams", "Vesnina", "62 60"],
                    ["SF", "Kerber", "V. Williams", "64 64"]
                ]
            }
        ]
    }
]

... or does it need to be flattened like this:

[
  [1234, "US Open", "2016-08-28", "2016-09-10", "Corona Park", "Flushing", "NY", "USA", 1, "Men's Open Singles", "F", "Wawrinka", "Djokovic", "67(7) 64 75 63"],
  [1234, "US Open", "2016-08-28", "2016-09-10", "Corona Park", "Flushing", "NY", "USA", 1, "Men's Open Singles", "SF", "Wawrinka", "Nishikori", "46 75 64 62"],
  [1234, "US Open", "2016-08-28", "2016-09-10", "Corona Park", "Flushing", "NY", "USA", 1, "Men's Open Singles", "SF", "Djokovic", "Monfils", "63 62 36 62"],
  [1234, "US Open", "2016-08-28", "2016-09-10", "Corona Park", "Flushing", "NY", "USA", 2, "Women's Open Singles", "F", "Kerber", "Pliskova", "63 46 64"],
  [1234, "US Open", "2016-08-28", "2016-09-10", "Corona Park", "Flushing", "NY", "USA", 2, "Women's Open Singles", "SF", "Kerber", "Wozniacki", "64 63"],
  [1234, "US Open", "2016-08-28", "2016-09-10", "Corona Park", "Flushing", "NY", "USA", 2, "Women's Open Singles", "SF", "Pliskova", "Williams", "62 76(5)"],
  [5679, "Wimbledon", "2016-07-03", "2016-07-16", "Wimbledon", "London", "", "GBR", 1, "Men's Open Singles", "F", "Murray", "Raonic", "64 76(3) 76(2)"],
  [5679, "Wimbledon", "2016-07-03", "2016-07-16", "Wimbledon", "London", "", "GBR", 1, "Men's Open Singles", "SF", "Murray", "Berdych", "63 63 63"],
  [5679, "Wimbledon", "2016-07-03", "2016-07-16", "Wimbledon", "London", "", "GBR", 1, "Men's Open Singles", "SF", "Raonic", "Federer", "63 67(3) 46 75 63"],
  [5679, "Wimbledon", "2016-07-03", "2016-07-16", "Wimbledon", "London", "", "GBR", 2, "Women's Open Singles", "F", "S. Williams", "Kerber", "75 63"],
  [5679, "Wimbledon", "2016-07-03", "2016-07-16", "Wimbledon", "London", "", "GBR", 2, "Women's Open Singles", "SF", "S. Williams", "Vesnina", "62 60"],
  [5679, "Wimbledon", "2016-07-03", "2016-07-16", "Wimbledon", "London", "", "GBR", 2, "Women's Open Singles", "SF", "Kerber", "V. Williams", "64 64"]
]

I am fine flattening the data, but if there are 255 results per event and a lot of events, repeating all the tournament and event information in every row can make the json packet a lot larger than necessary.

Thanks for any help.

Best,
Shannon

allan

Hi Shannon,

It does need to be flattened I'm afraid. DataTables needs each row to be an entry in an array (be it an array itself, an object, or an instance).

However, rather than changing the JSON sent by the server (as you rightly say that would increase the data transfer) you can use the ajax.dataSrc option as a function to modify the JSON returned by the server into the array needed by DataTables - i.e. just flatten it on the client-side.

Allan

shannonwrege

That sounds like a prefect solution and easy enough to implement. I appreciate the help. DataTables is a spectacular tool!

shannonwrege

In case anyone ever needs to do something like this, here is the solution that I came up with that works. The json format I am using is similar to above, but I have compacted it a little more to use just arrays instead of objects.

Here is a formatted version of the JSON file:

{
    "data": [
        [
            1234,
            "US Open",
            "2016-08-28",
            "2016-09-10",
            "Corona Park",
            "Flushing",
            "NY",
            "USA",
            [
                [
                    1,
                    "Men's Open Singles",
                    [
                        [
                            "F",
                            "Wawrinka",
                            "Djokovic",
                            "67(7) 64 75 63"
                        ],
                        [
                            "SF",
                            "Wawrinka",
                            "Nishikori",
                            "46 75 64 62"
                        ],
                        [
                            "SF",
                            "Djokovic",
                            "Monfils",
                            "63 62 36 62"
                        ]
                    ]
                ],
                [
                    2,
                    "Women's Open Singles",
                    [
                        [
                            "F",
                            "Kerber",
                            "Pliskova",
                            "63 46 64"
                        ],
                        [
                            "SF",
                            "Kerber",
                            "Wozniacki",
                            "64 63"
                        ],
                        [
                            "SF",
                            "Pliskova",
                            "Williams",
                            "62 76(5)"
                        ]
                    ]
                ]
            ]
        ],
        [
            5679,
            "Wimbledon",
            "2016-07-03",
            "2016-07-16",
            "Wimbledon",
            "London",
            "",
            "GBR",
            [
                [
                    1,
                    "Men's Open Singles",
                    [
                        [
                            "F",
                            "Murray",
                            "Raonic",
                            "64 76(3) 76(2)"
                        ],
                        [
                            "SF",
                            "Murray",
                            "Berdych",
                            "63 63 63"
                        ],
                        [
                            "SF",
                            "Raonic",
                            "Federer",
                            "63 67(3) 46 75 63"
                        ]
                    ]
                ],
                [
                    2,
                    "Women's Open Singles",
                    [
                        [
                            "F",
                            "S. Williams",
                            "Kerber",
                            "75 63"
                        ],
                        [
                            "SF",
                            "S. Williams",
                            "Vesnina",
                            "62 60"
                        ],
                        [
                            "SF",
                            "Kerber",
                            "V. Williams",
                            "64 64"
                        ]
                    ]
                ]
            ]
        ]
    ]
}

When initializing the datatable, here is the code I use:

    var table = $('#feature-table').DataTable({
      ajax: {
        url: 'http://sample.com/matchresults.json',
        dataSrc: function(json) {
          var tid     = 0;
          var eid     = 0;
          var tname   = '';
          var ename   = '';
          var starts  = null;
          var ends    = null;
          var club    = '';
          var city    = '';
          var state   = '';
          var country = '';
          var data    = [];
          var trn     = null;
          var evt     = null;
          var match   = null;
          var events  = null;
          var results = null;
          var tournaments = json.data;
          for (var i=0; i<tournaments.length; i++) {
            tid     = tournaments[i][0];
            tname   = tournaments[i][1];
            starts  = new Date(tournaments[i][2]);
            ends    = new Date(tournaments[i][3]);
            club    = tournaments[i][4];
            city    = tournaments[i][5];
            state   = tournaments[i][6];
            country = tournaments[i][7];
            events  = tournaments[i][8];
            for (var j=0; j<events.length; j++) {
              eid     = events[j][0];
              ename   = events[j][1];
              results = events[j][2];
              for (var k=0; k<results.length; k++) {
                match = results[k];
                data.push([
                  tid, tname, starts, ends, club, city, state, country, eid, ename, match[0], match[1], match[2], match[3]
                ]);
              }
            }
          }  
          return data;
        }
      }
    });  

It seems very fast, and the file size of the JSON packet is MUCH smaller when expressed in this way. If anyone can think of ways to make this more efficient, I would appreciate, but for now this seems to do the trick just fine.

Best,
Shannon

allan

Superb - great to hear that does the business for you and thanks for posting back with your code.

I don't immediately see a way to make it much more efficient on the client-side.

Allan