Question

我找到了这个功能

<script>
$(document).ready(function() {
    $('#container')
        .TidyTable({
            columnTitles : ['Column A','Column B','Column C','Column D','Column E'],
            columnValues : [
                ['1','1A','1B','1C','1D','1E'],
                ['2','2A','2B','2C','2D','2E'],
                ['3','3A','3B','3C','3D','3E'],
                ['4','4A','4B','4C','4D','4E'],
                ['5','5A','5B','5C','5D','5E']
            ]
        });
});

</script>

它给了我一个表格，我可以点击列标题并对相应的列进行排序。此外，我有一个具有以下结构的json文件：

{ "results": [
   {
       "information1": "Some info1",
       "information2": "Some info2"
   },
   {
       "information1": "Some info1",
       "information2": "Some info2"
   }
]}

我的问题是：

我可以将此JSON文件动态解析为上述函数吗？所以我想我有这样的事情：

<script>
$(document).ready(function() {
    $('#container')
        .TidyTable({
            columnTitles : ['Information 1','Information 2'],
            columnValues : [ //Something dynamic has to happen here for all entries
                ['information1', 'information2']
            ]
        });
});

</script>

我在这个领域并没有很好地遍历，所以具体对我有很大的帮助。感谢。

Answer 1

你应该可以使用jQuery的map方法。

var data = { "results": [
  {
    "information1": "Some info1",
    "information2": "Some info2"
  },
  {
    "information1": "Some info1",
    "information2": "Some info2"
  }
]}

// assumes keys are the same for every object in the array
var headers = $.map(data.results[0], function(v, k) { return k })

var values = [];
$.map(data.results, function(row) {
  values.push(
    $.map(row, function(v, k) {
      return v;    
    })
  );
});

console.log( headers ) // ['information1', 'information2']
console.log( values ) // [['Some info1', 'Some info2'], ['Some info1', 'Some info2']]

然后，只需在您的函数中使用新的数据格式：$('#container').TidyTable({ columnTitles : headers, columnValues : values});

在这里摆弄：http://jsfiddle.net/4ftoxw16/

.map（）上的文档：http://api.jquery.com/jquery.map/

尝试在JavaScript函数中动态获取JSON文件中的信息

1 个答案: