javascript - 如何使用 Dynatable 处理嵌套的 JSON 文件？

Question

我目前正在尝试加载 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 上找到

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