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

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/