【问题标题】:Construct multi column table from key,value pairs从键值对构造多列表
【发布时间】:2019-01-24 00:23:23
【问题描述】:

我有以下来自数据库表的 JSON

[{"name":"field1","value":Jim,"tieRef":1},{"name":"field2","value":120.11,"tieRef":1}, 
{"name":"field3","value":AAA,"tieRef":1},{"name":"field1","value":Stacy,"tieRef":2},
{"name":"field2","value":34.10,"tieRef":2},{"name":"field3","value":BBB,"tieRef":2}]

我需要构建一个如下所示的 HTML 表格。与同一行相关的值应由 tieRef 属性标识。

field1 | field2 | field3
-------------------------
JIm    | 120.11 |  AAA
-------------------------
Stacy  | 34.10  |  BBB

应该从“name”属性中提取列名。为了提取和汇总单个列下的值,我使用了下面列出的 d3.js

var transformed = d3.nest()
 .key(function(d) { return d.name; })
 .object(data);

通过使用它,我能够将原始 JSON 转换为以下内容

{"field1":[
    {"name":"field1","value":"Jim","tieRef":1}, 
    {"name":"field1","value":"Stacy","tieRef":2}],
"field2":[
    {"name":"field2","value":120.11,"tieRef":1}, 
    {"name":"field2","value":34.1,"tieRef":2}],
"field3":[
    {"name":"field3","value":"AAA","tieRef":1},
    {"name":"field3","value":"BBB","tieRef":2}]}

但我不确定是否需要进行正确的转换才能更轻松地构建 HTML 表格。请建议对 JSON 进行更好的转换,以便我可以循环并构造表格

有谁知道如何以优雅的方式实现这一目标?

【问题讨论】:

  • 你自己尝试过什么? StackOverflow 不是代码编写服务。
  • 你试过了吗?
  • 编辑您的问题并将您的代码尝试放在那里。
  • 如果您键入tieRef 并按rollup 部分中的列排序/重新排序。

标签: javascript json d3.js


【解决方案1】:

tieRefname 上的键对于转换JSON 非常有效。首先使用 d3 执行以下操作

var data = [{"name":"field1","value":"Jim","tieRef":1},
{"name":"field2","value":120.11,"tieRef":1},
{"name":"field3","value":"AAA","tieRef":1},
{"name":"field1","value":"Stacy","tieRef":2},
{"name":"field2","value":34.10,"tieRef":2},
{"name":"field3","value":"BBB","tieRef":2}];

var transform = d3.nest()
 .key(function(d) { return d.tieRef; })
 .key(function(d) { return d.name; })
.object(data);

这会将 JSON 转换为以下内容。

{"1":
  {"field1":
            [{"name":"field1","value":"Jim","tieRef":1}],
   "field2": 
            [{"name":"field2","value":120.11,"tieRef":1}],
   "field3": 
            [{"name":"field3","value":"AAA","tieRef":1}]
  },
 "2":
   {"field1": 
            [{"name":"field1","value":"Stacy","tieRef":2}],
    "field2": 
            [{"name":"field2","value":34.1,"tieRef":2}],
    "field3": 
            [{"name":"field3","value":"BBB","tieRef":2}]
    }
   }

然后通过行号1,2,.. 对其进行迭代并构造表或进一步转换 JSON

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2013-10-15
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2022-01-01
    • 1970-01-01
    • 2023-02-04
    • 1970-01-01
    相关资源
    最近更新 更多