JSON到HTML转换使用jq-解网

问：

我有一个以下格式的 JSON，我想从它创建一个给定格式的 HTML 文件。不幸的是，由于一些限制，我只能使用“jq”来实现这一点。我是 shell 脚本世界的新手，这个真的让我很烦恼。对齐方式等无关紧要，表格应以所需的格式填充。

[
  {
    "key1" : "value1",
    "key2" : "value2",
    "key3" : "value3",
    "key4":[
      {
        "key5" : "value5",
        "key6" : "value6"
      },
      {
        "key5" : "value7",
        "key6" : "value8"
      }
      ]
  },
  {
    "key1" : "value11",
    "key2" : "value12",
    "key3" : "value13",
    "key4":[
      {
        "key5" : "value15",
        "key6" : "value16"
      },
      {
        "key5" : "value17",
        "key6" : "value18"
      }
      ]
  }
]

HTML 应该像这样显示

<p>Summary of JSON</p>
<table style="border-collapse: collapse; width: 100%;" border="1">
<tbody>
<tr>
<td style="text-align: center;"><strong>key1</strong></td>
<td style="text-align: center;"><strong>key2</strong></td>
<td style="text-align: center;"><strong>key3</strong></td>
</tr>
<tr>
<td >value1</td>
<td >value2</td>
<td >value3</td>
</tr>
<tr>
<td >value11</td>
<td >value12</td>
<td >value13</td>
</tr>
</tbody>
</table>
<p>Details of value1</p>
<table style="border-collapse: collapse; width: 100%;" border="1">
<tbody>
<tr>
<td style="text-align: center;"><strong>key5</strong></td>
<td style="text-align: center;"><strong>key6</strong></td>
</tr>
<tr>
<td>value5</td>
<td>value6</td>
</tr>
<tr>
<td>value7</td>
<td>value8</td>
</tr>
</tbody>
</table>
<p>Details of value11</p>
<table style="border-collapse: collapse; width: 100%;" border="1">
<tbody>
<tr>
<td style="text-align: center;"><strong>key5</strong></td>
<td style="text-align: center;"><strong>key6</strong></td>
</tr>
<tr>
<td>value15</td>
<td>value16</td>
</tr>
<tr>
<td>value17</td>
<td>value18</td>
</tr>
</tbody>
</table>

html json linux jq 嵌套列表

关于输入，顶级记录是否始终具有彼此相同的键？辅助记录是否始终具有彼此相同的字段？辅助记录是始终只位于一个顶级记录下，还是可能位于多个顶级记录下？最后一个问题：它真的只能使用 jq 吗，或者它可以使用 shell 脚本（如果是的话，是哪一个）或其他“标准”实用程序（例如 perl、awk、sed）？

0赞 phoenix_reboot 5/15/2021

@JoeCasadonte在 key4 中，我们只有 2 个 json 对象，但实际上它可能是动态的，但它们只有 key5 和 key6。同样，在主 json 数组中，我只给出了 2 个对象，但由于它是一个数组，因此大小可能是动态的，尽管键始终保持不变。关于使用其他实用程序，不幸的是，我不能使用jq以外的任何东西。希望这会有所帮助。

0赞 Joe Casadonte 5/15/2021

恐怕我不知道如何在 jq 中打印这样的结构化输出——我希望至少有一个围绕 jq 调用的 shell 脚本包装器。我敢肯定，只需 jq 就可以完成，将字符串连接在一起，令人作呕，但我还没有研究过如何做这样的事情，因为我从未有过如此严格的限制。

答：

3赞 peak 5/15/2021 #1

下面是一个肉和土豆解决方案，从一些通用的 JSON-to-html 过滤器开始：

一些通用的 to-html 过滤器

def p($p): "<p>\($p)</p>";

# input: array of arrays
def row2html:
  reduce .[] as $value ("<tr>"; . + "<td>\($value)</td>") + "</tr>";

# with style
def row2html($style):
  reduce .[] as $value ("<tr>";
     . + "<td style=\($style)><strong>\($value)</strong></td>") + "</tr>";

# input: an array of arrays, the first being treated as a header row
def table2html($tablestyle; $headerstyle):
  "<table style=\($tablestyle)>",
  "<tbody>",
   (.[0] | row2html($headerstyle)),
   (.[1:][] | row2html),
  "</tbody>",
  "</table>" ;

JSON-to-JSON 用于手头的任务

# Input: an array of conformal objects
# Output: header array followed by arrays of values
def atomicKeys2arrays:
  # emit an array of atomic keys
  def atomicKeys: to_entries | map( select(.value|scalars) | .key);
  (.[0] | atomicKeys) as $keys
  | $keys,
    (.[] | [ .[$keys[]]]);

手头的任务

def tableStyle: "\"border-collapse: collapse; width: 100%;\" border=\"1\"" ;
def headerStyle: "\"text-align: center;\"" ;

def table2html: table2html(tableStyle; headerStyle);

def task:
  p("Summary of JSON"),
  ( [atomicKeys2arrays]|table2html ),
  p("Details of value1"),
  ([.[0].key4 | atomicKeys2arrays] | table2html ), 
  p("Details of value11"),
  ([.[1].key4 | atomicKeys2arrays] | table2html ) ;

task

输出：

<p>Summary of JSON</p>
<table style="border-collapse: collapse; width: 100%;" border="1">
<tbody>
<tr><td style="text-align: center;"><strong>key1</strong></td><td style="text-align: center;"><strong>key2</strong></td><td style="text-align: center;"><strong>key3</strong></td></tr>
<tr><td>value1</td><td>value2</td><td>value3</td></tr>
<tr><td>value11</td><td>value12</td><td>value13</td></tr>
</tbody>
</table>
<p>Details of value1</p>
<table style="border-collapse: collapse; width: 100%;" border="1">
<tbody>
<tr><td style="text-align: center;"><strong>key5</strong></td><td style="text-align: center;"><strong>key6</strong></td></tr>
<tr><td>value5</td><td>value6</td></tr>
<tr><td>value7</td><td>value8</td></tr>
</tbody>
</table>
<p>Details of value11</p>
<table style="border-collapse: collapse; width: 100%;" border="1">
<tbody>
<tr><td style="text-align: center;"><strong>key5</strong></td><td style="text-align: center;"><strong>key6</strong></td></tr>
<tr><td>value15</td><td>value16</td></tr>
<tr><td>value17</td><td>value18</td></tr>
</tbody>
</table>

-1赞 Pál Farkas 5/16/2021 #2

也许检查一下，您可以使用JS轻松生成 https://www.w3schools.com/js/js_json_html.asp

上一个：使用 focus-within 显示带有 CSS 的嵌套列表

下一个：如何使用 Javascript 从带有嵌套列表的 JSON 动态创建表？

JSON到HTML转换使用jq

JSON to HTML conversion using jq

评论

一些通用的 to-html 过滤器

JSON-to-JSON 用于手头的任务

手头的任务

输出：