html - 使用 jq 将 JSON 转换为 HTML

Question

我有一个以下格式的 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>

标签： htmljsonlinuxjqnested-lists

Answer 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 到 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>