行和列HTML TABLE（JSON RESPONSE） [英] Rows and Columns HTML TABLE (JSON RESPONSE)

问题描述

我在index.html中有以下代码，它抓取字典列表并将键和值输出到表中。

  $（function（）{
 $（'a＃search'）。bind（'click'，function（）{
 $ .getJSON（'/ _ search'，{
a：$（ 'input [name =a]'）。val（）
}，function（data）{
 var tableData ='< table>'
 $ .each（data.result （key），
 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​​

<的字典列表pre> result = defaultdict（list）
return jsonify（result = result）


结果包含以下内容：

  defaultdict（< class'list'> ;, {'Developer' ：['Office Koukan'，'Jorudan'，'Beam Software']，'发布者'：['Shouei'，'VAP'，'Hi Tech Expressions']，'ReleaseDate'：[''March 18,1994' 1994年11月18日''，'1993年10月1日']，'标题'：['想法不喜欢'，'柏青哥喜Hisshouhou'，'hun红色十月追猎']}）
  

然而，我的输出如下所示：

  Developer Publisher ReleaseDate Title 
办公室Koukan Jorudan Beam软件
 Shouei VAP高科技表达式
 1994年3月18日1994年11月18日1993年10月1日
 Idea no Hi Pachinko Hi Hisshouhou hunThe Hunt对于红色十月
  

当输出应该是

  Developer Publisher ReleaseDate标题
办公室Shouei ... ... 
 Koukan VAP ... ... 
 Jorudan ... ... ... 
 Beam Software ...。 .. ... 
  

任何想法我可能做错了任何帮助将不胜感激？ p>

解决方案

由于JSON格式化的方式，您需要使用多个循环。如果您可以控制此格式，则循环操作会更简单，但格式如下： -
$ b $ $ p $ {
对象：[
{
开发者：办公室增刊，
发布者：Shouei，
ReleaseDate：1994年3月18日 ，
Title：Idea no Hi
}，
{
Developer：Jorudan，
Publisher：VAP，
ReleaseDate：1994年11月18日，
标题：Pachinko Hi Hisshouhou
}，
{
开发人员：梁软件 ，
发行商：高科技表达式，
发行日期：1993年10月1日，
标题：hun红色十月追逐
}


$ / code $ / pre



这会为你提供一个更加自然的循环可以遍历每个对象，而不是循环遍历每个字段多次组合。

如果您无法更改格式，请看这个jsfiddle http://jsfiddle.net/8TT4p/3538/ 。

我创建了一个JS数组来匹配您的数据。我通过一次循环获取表格标题行设置。然后有一个三重嵌套循环为每条记录创建一行，然后为该行/列提取正确的数据。

希望它能以某种方式提供帮助

I have the following code in index.html which grabs a dictionary list and prints out keys and values into a table

$(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);
    });

What it is grabbing is a dictionary list from search.py

result = defaultdict(list)
return jsonify(result=result)

result contains the following

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']})

However my output is as follows

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

When the output should be

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

Any idea what I might be doing wrong any help would be appreciated?

解决方案

Because of the way the JSON is formatted you need to use multiple loops. If you have control over this formatting it would be much simpler to loop though it if formatted as follows :-

{
  "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"
  }
]
}

This will provide you a much more natural loop as you can loop through each object instead of looping back over each field grouping multiple times.

If you can't change the format, look at this jsfiddle http://jsfiddle.net/8TT4p/3538/.

I created a JS array to match your data. Ive looped through once to get the table header row setup. Then there's a triple nested loop to create a row for each record, then pull out the correct data for that row/column.

Hope it helps in some way

这篇关于行和列HTML TABLE（JSON RESPONSE）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！