行和列HTML表(JSON响应)

时间:2017-04-05 20:53:43

标签: python html dictionary html-table

我在index.html中有以下代码,它抓取字典列表并将键和值打印到表中

$(function() {
  $('a#search').bind('click', function() {
    $.getJSON('/_search', {
      a: $('input[name="a"]').val()
    }, function(data) {
      var tableData = '<table>'
      $.each(data.result, function(key, value){
        tableData += '<tr><td>' + '   ' + key + '   ' + '</td>';
        alert(key)
        $.each(value, function(val){
            alert(value[val])
            tableData += '<td>' + value[val] + '</td>';
          });
        tableData += '</tr>';
      });
      tableData += '</table>';
      $('#table').html(tableData);
    });

它抓住的是来自search.py​​

的字典列表
result = defaultdict(list)
return jsonify(result=result)

结果包含以下内容

defaultdict(<class 'list'>, {'Developer': ['Office Koukan', 'Jorudan', 'Beam Software'], 'Publisher': ['Shouei', 'VAP', 'Hi Tech Expressions'], 'ReleaseDate': ['March 18, 1994', 'November 18, 1994', 'October 1, 1993'], 'Title': ['Idea no Hi', 'Pachinko Hi Hisshouhou', 'hunThe Hunt for Red October']})

但是我的输出如下

Developer Publisher ReleaseDate Title
Office    Koukan    Jorudan Beam Software
Shouei    VAP       Hi Tech Expressions
March 18, 1994  November 18, 1994   October 1, 1993
Idea no Hi  Pachinko Hi Hisshouhou  hunThe Hunt for Red October

当输出应为

Developer      Publisher ReleaseDate Title
Office         Shouei    ...         ...
Koukan         VAP       ...         ...
Jorudan        ...       ...         ...
Beam Software  ...       ...         ...

任何想法我可能做错了任何帮助都会受到赞赏吗?

1 个答案:

答案 0 :(得分:1)

由于JSON的格式化方式,您需要使用多个循环。如果您可以控制这种格式化,那么循环它会更简单,如果格式如下: -

{
  "objects" : [
  {
    "Developer": "Office Koukan",
    "Publisher": "Shouei",
    "ReleaseDate": "March 18, 1994",
    "Title": "Idea no Hi"
  },
  {
    "Developer": "Jorudan",
    "Publisher": "VAP",
    "ReleaseDate": "November 18, 1994",
    "Title": "Pachinko Hi Hisshouhou"
  },
  {
    "Developer": "Beam Software",
    "Publisher": "Hi Tech Expressions",
    "ReleaseDate": "October 1, 1993",
    "Title": "hunThe Hunt for Red October"
  }
]
}

这将为您提供一个更自然的循环,因为您可以循环遍历每个对象,而不是多次循环回每个字段分组。

如果您无法更改格式,请查看此jsfiddle http://jsfiddle.net/8TT4p/3538/

我创建了一个JS数组来匹配您的数据。我已经循环了一次以获得表头行设置。然后有一个三重嵌套循环为每条记录创建一行,然后为该行/列提取正确的数据。

希望它在某种程度上有所帮助