如何使用Dynatable处理嵌套的JSON文件?

时间:2014-03-25 15:57:09

标签: javascript jquery json dynatable

我目前正在尝试加载BLAST数据(来自酷炫的生物实验)并使用Dynatable显示它。我是JSON和Javascript的新手,但我认为我已经开始运行了。问题是JSON“对象”中有一个嵌套实例,我无法将其加载到Dynatable中。

这是一个剪辑的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"

            }
        }
    }]

正如你所看到的那样,它有一个“Hit_hsps”和“Hsp”嵌套。但每次点击只有一个Hit_hsps / HsP实例。

最好的方法是什么?展平JSON文件还是有更巧妙的方法来处理Dynatable中的这种嵌套数据?

我正在使用此代码来显示表格

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

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

整个群体可在JSFiddle

上找到

1 个答案:

答案 0 :(得分:1)

答案有点晚,但它看起来像一个有趣的问题,所以在这里......

FIDDLE -

我在Dynatable上阅读了这些内容,解析非典型JSON文件时并不是很清楚。

Sooo ......我是从头开始做的。

基本表是HTML格式,表格的行附加到正文。我只使用了两组JSON变量,但您可以轻松计算数组中变量集的数量,然后循环到该数字。

我了解到动态创建的表格没有很容易设置样式,因此HTML和javascript的组合。

如果你能弄清楚如何将单个数据元素放入Dynatable,你可以看到我如何解析它(它是相当直接的)。

相关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>");
}