English 中文(简体)
Json to Rainbow in Dataweave 2.0
原标题:Json to HTML in Dataweave 2.0

我正试图将一个json阵列转换到(以表格格式)在MuleSoft使用2.0数据。 我的投入有效载荷就是这样:

[
  {
    "Product ID": "4d5c0b68",
    "Product Number": "be56",
    "Product Name": "Product A",
    "Product Priority": "High Risk",
    "Product Attachments": 2,
    "Combo?": "No"
  }
]

我需要的html产出如下:

<table style="width: 50%; border: 1px solid black; font-family: Monospace">
  <tr bgcolor="#6c7ae0" style="color: white !important;border: 1px solid black; font-size:14px; ">
    <th bgcolor="#6c7ae0" style="color: white !important;border: 1px solid black; font-size:14px; ">Product ID</th>
    <th bgcolor="#6c7ae0" style="color: white !important;border: 1px solid blue; font-size:14px; ">Product Number</th>
    <th bgcolor="#6c7ae0" style="color: white !important;border: 1px solid black; font-size:14px; ">Product Name</th>
    <th bgcolor="#6c7ae0" style="color: white !important;border: 1px solid black; font-size:14px; ">Product Priority</th>
    <th bgcolor="#6c7ae0" style="color: white !important;border: 1px solid black; font-size:14px; ">Product Attachments</th>
    <th bgcolor="#6c7ae0" style="color: white !important;border: 1px solid black; font-size:14px; ">Combo?</th>
  </tr>
  <tr align="center" style="color: #666666; font-size:12px; border: 1px solid black; font-weight: 500; width:10%">
    <td style="color: black !important;border: 1px solid black; font-size:14px; ">4d5c0b68</td>
    <td style="color: black !important;border: 1px solid black; font-size:14px; ">be56</td>
    <td style="color: black !important;border: 1px solid black; font-size:14px; ">Product A</td>
    <td style="color: black !important;border: 1px solid black; font-size:14px; ">High Risk</td>
    <td style="color: black !important;border: 1px solid black; font-size:14px; ">2</td>
    <td style="color: black !important;border: 1px solid black; font-size:14px; ">No</td>
  </tr>
</table>

The json data currently given is for only 1 row and I will have to map the whole array in the html. Can this be achieved using dataweave 2.0?

这就是我目前的情况。

%dw 2.0
output application/xml writeDeclaration=false
var tableData = payload map ((item, index) -> 
{
    "Product ID" : item.ProductID,
    "Product Number": item.ProductNumber,
    "Product Name": item.ProductName,
    "Product Priority": item.ProductPriority,
    "Product Attachments": item.ProductAttachments as Number,
    "Combo?" : if (item.Combo == "false") "No" else "Yes"
})
var headerRow = [
    {
        "header": "Product ID",
        "style": "color: white !important; border: 1px solid black; font-size: 14px;"
    },
    {
        "header": "Product Number",
        "style": "color: white !important; border: 1px solid black; font-size: 14px;"
    },
    {
        "header": "Product Name",
        "style": "color: white !important; border: 1px solid black; font-size: 14px;"
    },
    {
        "header": "Product Priority",
        "style": "color: white !important; border: 1px solid black; font-size: 14px;"
    },
    {
        "header": "Product Attachments",
        "style": "color: white !important; border: 1px solid black; font-size: 14px;"
    },
    {
        "header": "Combo?",
        "style": "color: white !important; border: 1px solid black; font-size: 14px;"
    }
]
---
<table style="width: 50%; border: 1px solid black; font-family: Monospace">
  <tr bgcolor="#6c7ae0" style="color: white !important; border: 1px solid black; font-size: 14px;">
    <th bgcolor="#6c7ae0" style="color: white !important; border: 1px solid black; font-size: 14px;">Case #</th>
    <th bgcolor="#6c7ae0" style="color: white !important; border: 1px solid blue; font-size: 14px;">Interaction #</th>
    <th bgcolor="#6c7ae0" style="color: white !important; border: 1px solid black; font-size: 14px;">Product Name</th>
    <th bgcolor="#6c7ae0" style="color: white !important; border: 1px solid black; font-size: 14px;">PQC Priority</th>
    <th bgcolor="#6c7ae0" style="color: white !important; border: 1px solid black; font-size: 14px;">No. of PQC Attachments</th>
    <th bgcolor="#6c7ae0" style="color: white !important; border: 1px solid black; font-size: 14px;">Combo?</th>
  </tr>
  <tr align="center" style="color: #666666; font-size: 12px; border: 1px solid black; font-weight: 500; width: 10%">
    <td style="color: black !important; border: 1px solid black; font-size: 14px;">{(tableData[0]."Product ID")}</td>
    <td style="color: black !important; border: 1px solid black; font-size: 14px;">{(tableData[0]."Product Number")}</td>
    <td style="color: black !important; border: 1px solid black; font-size: 14px;">{(tableData[0]."Product Name")}</td>
    <td style="color: black !important; border: 1px solid black; font-size: 14px;">{(tableData[0]."Product Priority")}</td>
    <td style="color: black !important; border: 1px solid black; font-size: 14px;">{(tableData[0]."Product Attachments")}</td>
    <td style="color: black !important; border: 1px solid black; font-size: 14px;">{(tableData[0]."Combo?")}</td>
  </tr>
</table>
问题回答

数据Weave不支持作为产出类型的超文本(Check ,该用于支持格式。 然而,我们可以使用“申请/xml”来编制带有必要标签的超文本内容,然后在发送电子邮件或发送目标系统时,将结果定在“文字/html”的内容类型上。 我希望这一信息是有益的。

投入

[
  {
    "Product ID": "4d5c0b68",
    "Product Number": "be56",
    "Product Name": "Product A",
    "Product Priority": "High Risk",
    "Product Attachments": 2,
    "Combo?": "No"
  }
]

数据我们文

%dw 2.0
var keys = keysOf(payload[0])
output application/xml writeDeclaration=false
---
table @(style:"width: 50%; border: 1px solid black; font-family: Monospace"): {
    //Headers Mapping
    tr @(bgcolor:"#6c7ae0", style:"color: white !important;border: 1px solid black; font-size:14px; "): {
        (keys map ((item, index) -> {
            th @(bgcolor: "#6c7ae0", style: "color: white !important;border: 1px solid black; font-size:14px; "):item
        }))
    },
    //Values Mapping
    tr @(align:"center", style:"color: #666666; font-size:12px; border: 1px solid black; font-weight: 500; width:10%"): {
        (payload map ((item, index) -> {
            (item mapObject {
                td @(style:"color: black !important;border: 1px solid black; font-size:14px; ", ): $
            })
        }))
    }
}

产出

<table style="width: 50%; border: 1px solid black; font-family: Monospace">
  <tr bgcolor="#6c7ae0" style="color: white !important;border: 1px solid black; font-size:14px; ">
    <th bgcolor="#6c7ae0" style="color: white !important;border: 1px solid black; font-size:14px; ">Product ID</th>
    <th bgcolor="#6c7ae0" style="color: white !important;border: 1px solid black; font-size:14px; ">Product Number</th>
    <th bgcolor="#6c7ae0" style="color: white !important;border: 1px solid black; font-size:14px; ">Product Name</th>
    <th bgcolor="#6c7ae0" style="color: white !important;border: 1px solid black; font-size:14px; ">Product Priority</th>
    <th bgcolor="#6c7ae0" style="color: white !important;border: 1px solid black; font-size:14px; ">Product Attachments</th>
    <th bgcolor="#6c7ae0" style="color: white !important;border: 1px solid black; font-size:14px; ">Combo?</th>
  </tr>
  <tr align="center" style="color: #666666; font-size:12px; border: 1px solid black; font-weight: 500; width:10%">
    <td style="color: black !important;border: 1px solid black; font-size:14px; ">4d5c0b68</td>
    <td style="color: black !important;border: 1px solid black; font-size:14px; ">be56</td>
    <td style="color: black !important;border: 1px solid black; font-size:14px; ">Product A</td>
    <td style="color: black !important;border: 1px solid black; font-size:14px; ">High Risk</td>
    <td style="color: black !important;border: 1px solid black; font-size:14px; ">2</td>
    <td style="color: black !important;border: 1px solid black; font-size:14px; ">No</td>
  </tr>
</table>




相关问题
CSS working only in Firefox

I am trying to create a search text-field like on the Apple website. The HTML looks like this: <div class="frm-search"> <div> <input class="btn" type="image" src="http://www....

image changed but appears the same in browser

I m writing a php script to crop an image. The script overwrites the old image with the new one, but when I reload the page (which is supposed to pickup the new image) I still see the old one. ...

Firefox background image horizontal centering oddity

I am building some basic HTML code for a CMS. One of the page-related options in the CMS is "background image" and "stretch page width / height to background image width / height." so that with large ...

Separator line in ASP.NET

I d like to add a simple separator line in an aspx web form. Does anyone know how? It sounds easy enough, but still I can t manage to find how to do it.. 10x!

热门标签