需要在 html 中为 mule 应用程序以表格形式显示 json 数组输出

Question

鉴于我的 json 输出为：

[
  {
    "appName": "abc-supportcase-proc-api",
    "depedencies": [
      {
        "connector": "abc-supportcase-proc-api",
        "version": "1.0.13"
      },
      {
        "connector": "mule-file-connector",
        "version": "1.3.3"
      },
      {
        "connector": "mule-objectstore-connector",
        "version": "1.1.6"
      },
      {
        "connector": "mule-validation-module",
        "version": "1.4.0"
      }
    ]
  },
  {
    "appName": "def-classification-sap-sys-api",
    "depedencies": [
      {
        "connector": "mule-sap-connector",
        "version": "5.1.1"
      },
      {
        "connector": "def-classification-sap-sys-api",
        "version": "1.0.5"
      },
      {
        "connector": "com.sap.conn.idoc.sapidoc3",
        "version": "3.0.13"
      },
      {
        "connector": "com.sap.conn.jco.sapjco3",
        "version": "3.0.19"
      },
      {
        "connector": "libsapjco3",
        "version": "3.0.19"
      }
    ]
  }
...
...
]

我需要以表格格式显示它，例如第一列应该是 appName，其他列将是连接器值（标题），版本将是版本的相应值。有人可以帮忙吗？

Answer 1

这个问题并不完全符合您的期望。我的解决方案使用 answer 中的方法从 Mule 应用程序生成 HTML。我首先将数据转换为更可用的格式并提取列名，然后动态生成输出。如果您更喜欢在 JavaScript 中生成表格，您可以保留逻辑以更有用的方式从变量 tableData（也可以选择 connectorNames）获取数据，以设置 Mule 应用程序的输出。用 JavaScript 翻译表格生成部分看起来并不难。

%dw 2.0
import indexOf from dw::core::Arrays
output application/xml writeDeclaration=false
var tableData=payload flatMap ((item, index) -> item.depedencies 
        map ((dependency, depIndex) -> 
            { 
                appName: item.appName,
                connectorName: dependency.connector,
                connectorVersion: dependency.version
            }
        )
) 
var connectorNames=tableData reduce ((item, accumulator=[]) ->  accumulator ++ [item.connectorName] )
---
{
    table @(style: "width: 50%; border: 1px solid grey; font-family: Monospace" ): {
        tr @(bgcolor: "#6c7ae0",style: "color: white !important; font-size:14px; "): 
        { th @(): "appName" } ++ (connectorNames reduce ((item, accumulator={}) -> accumulator ++ {th @(): item}) )
        ,
        (tableData map (item, index) -> {
            tr @(align:"center", style: "color: #666666; font-size:12px; font-weight: 500; width:10%"): {
                td @(): item["appName"],
                (connectorNames map td @(): if ((connectorNames indexOf(item.connectorName)) == $$) item.connectorVersion else "")
            }
        })
    }
}

输出：

<table style="width: 50%; border: 1px solid grey; font-family: Monospace">
  <tr bgcolor="#6c7ae0" style="color: white !important; font-size:14px; ">
    <th>appName</th>
    <th>abc-supportcase-proc-api</th>
    <th>mule-file-connector</th>
    <th>mule-objectstore-connector</th>
    <th>mule-validation-module</th>
    <th>mule-sap-connector</th>
    <th>def-classification-sap-sys-api</th>
    <th>com.sap.conn.idoc.sapidoc3</th>
    <th>com.sap.conn.jco.sapjco3</th>
    <th>libsapjco3</th>
  </tr>
  <tr align="center" style="color: #666666; font-size:12px; font-weight: 500; width:10%">
    <td>abc-supportcase-proc-api</td>
    <td>1.0.13</td>
    <td/>
    <td/>
    <td/>
    <td/>
    <td/>
    <td/>
    <td/>
    <td/>
  </tr>
  <tr align="center" style="color: #666666; font-size:12px; font-weight: 500; width:10%">
    <td>abc-supportcase-proc-api</td>
    <td/>
    <td>1.3.3</td>
    <td/>
    <td/>
    <td/>
    <td/>
    <td/>
    <td/>
    <td/>
  </tr>
  <tr align="center" style="color: #666666; font-size:12px; font-weight: 500; width:10%">
    <td>abc-supportcase-proc-api</td>
    <td/>
    <td/>
    <td>1.1.6</td>
    <td/>
    <td/>
    <td/>
    <td/>
    <td/>
    <td/>
  </tr>
  <tr align="center" style="color: #666666; font-size:12px; font-weight: 500; width:10%">
    <td>abc-supportcase-proc-api</td>
    <td/>
    <td/>
    <td/>
    <td>1.4.0</td>
    <td/>
    <td/>
    <td/>
    <td/>
    <td/>
  </tr>
  <tr align="center" style="color: #666666; font-size:12px; font-weight: 500; width:10%">
    <td>def-classification-sap-sys-api</td>
    <td/>
    <td/>
    <td/>
    <td/>
    <td>5.1.1</td>
    <td/>
    <td/>
    <td/>
    <td/>
  </tr>
  <tr align="center" style="color: #666666; font-size:12px; font-weight: 500; width:10%">
    <td>def-classification-sap-sys-api</td>
    <td/>
    <td/>
    <td/>
    <td/>
    <td/>
    <td>1.0.5</td>
    <td/>
    <td/>
    <td/>
  </tr>
  <tr align="center" style="color: #666666; font-size:12px; font-weight: 500; width:10%">
    <td>def-classification-sap-sys-api</td>
    <td/>
    <td/>
    <td/>
    <td/>
    <td/>
    <td/>
    <td>3.0.13</td>
    <td/>
    <td/>
  </tr>
  <tr align="center" style="color: #666666; font-size:12px; font-weight: 500; width:10%">
    <td>def-classification-sap-sys-api</td>
    <td/>
    <td/>
    <td/>
    <td/>
    <td/>
    <td/>
    <td/>
    <td>3.0.19</td>
    <td/>
  </tr>
  <tr align="center" style="color: #666666; font-size:12px; font-weight: 500; width:10%">
    <td>def-classification-sap-sys-api</td>
    <td/>
    <td/>
    <td/>
    <td/>
    <td/>
    <td/>
    <td/>
    <td/>
    <td>3.0.19</td>
  </tr>
</table>