How to deal with a nested JSON file using Dynatable?

Question

I'm currently trying to load in BLAST data (from a cool biological experiment) and showing it using Dynatable. I'm new to JSON and Javascript but I think I got the beginning up and running. The problem is that the JSON "object" has a nested instance in it and I'm not able to load that into Dynatable.

This is a snipped of the JSON

[{
        "Hit_num": "1",
            "Hit_id": "gi|495426285|ref|WP_008150982.1|",
            "Hit_accession": "WP_008150982",
            "Hit_hsps": {
            "Hsp": {
                "Hsp_num": "1",
                    "Hsp_bit-score": "202.986",
                    "Hsp_score": "515",
                    "Hsp_evalue": "1.7033e-61"
            }
        }
    }, {
        "Hit_num": "2",
            "Hit_id": "gi|495936315|ref|WP_008660894.1|",
            "Hit_accession": "WP_008660894",
            "Hit_hsps": {
            "Hsp": {
                "Hsp_num": "1",
                    "Hsp_bit-score": "196.052",
                    "Hsp_score": "497",
                    "Hsp_evalue": "8.4357e-59"
            }
        }
    }, {
        "Hit_num": "3",
            "Hit_id": "gi|495936314|ref|WP_008660893.1|",
            "Hit_accession": "WP_008660893",
            "Hit_hsps": {
            "Hsp": {
                "Hsp_num": "1",
                    "Hsp_bit-score": "185.652",
                    "Hsp_score": "470",
                    "Hsp_evalue": "6.08306e-55"

            }
        }
    }]

As you can see it has a "Hit_hsps" and "Hsp" nesting in it. But every hit only has one Hit_hsps/HsP instance in it.

What would be the best way to go? Flatten the JSON file or is there a more ingenious way to deal with this kind of nested data in Dynatable?

I'm using this code to show the table

  $(document).ready(function () {
      $.dynatableSetup({
          table: {
              defaultColumnIdStyle: 'trimDash' //Make it accept _ spaced headers
          }
      });

      $('#remote').dynatable({
          dataset: {
              records: JSON.parse($('#blast').text()) //Parse
          }
      });
  });

The whole bunch is available on a JSFiddle

score 1 · Accepted Answer · answered Sep 04 '14 at 04:51

Answer is a bit late, but it looked like an interesting question, so here it goes...

The FIDDLE -

I read the stuff on Dynatable, and it wasn't very clear on parsing atypical JSON files.

Sooo...I did it from scratch.

The basic table is in HTML, and the rows of the table are appended to body. I've only used two JSON sets of variables, but you could easily count the number of variable sets in the array, then just loop to that number.

I learned that dynamically created tables are not styled very easily, thus the combination of HTML and javascript.

If you can figure out how to put individual data elements into Dynatable, you can see how I parsed it (it's fairly straight-forward).

Relevant JS

for(var n=0; n<2; n++)
{
  var one   = myarray[n].Hit_num;
  var two   = myarray[n].Hit_id;
  var three = myarray[n].Hit_accession;
  var four  = myarray[n].Hit_hsps.Hsp.Hsp_num;
  var five  = myarray[n].Hit_hsps.Hsp.Hsp_bit_score;
  var six   = myarray[n].Hit_hsps.Hsp.Hsp_score;
  var seven = myarray[n].Hit_hsps.Hsp.Hsp_evalue;
  fillrow(one, two, three, four, five, six, seven);
}

function fillrow(one, two, three, four, five, six, seven)
{
    $('tbody').append("<tr><td style='width:50px'>" + one +
                            "</td><td>" + two +
                            "</td><td>" + three +
                            "</td><td>" + four +
                            "</td><td>" + five +
                            "</td><td>" + six +
                            "</td><td>" + seven +
                            "</td></tr>");
}

How to deal with a nested JSON file using Dynatable?

1 Answers1