JSON (JavaScript Object Notation) is a widely used data interchange format, and its flexibility allows for the representation of complex hierarchical structures. One such structure is the nested JSON array, often encountered in various applications for organizing and storing data in a hierarchical manner.
Understanding the Nested JSON Array
Consider the following nested JSON array representing pallet and box information:
pallets = [
{
pallet_id: “1”,
containerCode: “607507930000261660”,
totalQty: 12, // Sum of quantities in the pallet
boxes_count: 1,
boxes: [
{
box_id: “1”,
containerCode: “607507930000261660”,
items: [
{ itemSku: “CTG233”, quantity: “10” },
{ itemSku: “A308”, quantity: “1” }
],
totalQty: 11 // Sum of quantities in the box
}
]
},
{
pallet_id: “2”,
containerCode: “607507930000261684”,
totalQty: 4,
boxes_count: 1,
boxes: [
{
box_id: “2”,
containerCode: “607507930000261684”,
items: [
{ itemSku: “PB307TB”, quantity: “1” },
{ itemSku: “A502”, quantity: “2” },
{ itemSku: “HR1616”, quantity: “1” }
],
totalQty: 4
}
]
},
{
pallet_id: “3”,
containerCode: “607507930000261707”,
totalQty: 16,
boxes_count: 2,
boxes: [
{
box_id: “4”,
containerCode: “607507930000261707”,
items: [
{ itemSku: “MX034MT”, quantity: “1” },
{ itemSku: “CP205WL”, quantity: “1” },
{ itemSku: “CF233DBL”, quantity: “4” },
{ itemSku: “P5HP”, quantity: “1” }
],
totalQty: 7
},
{
box_id: “3”,
containerCode: “607507930000261707”,
items: [
{ itemSku: “PS2165DLX”, quantity: “1” },
{ itemSku: “MX315”, quantity: “8” }
],
totalQty: 9
}
]
}
];
In this structure, each pallet has an identifier (pallet_id), a container code (containerCode), a total quantity (totalQty), a box count (boxes_count), and an array of boxes, each with its own properties.
Rendering the Nested JSON Array in Templates
To visualize and utilize this data in an Advanced PDF/HTML template, a renderer is employed. The template includes logic for iterating through the pallets and boxes, creating a structured table with relevant details.
<table align=“justify” style=“width: 100%;” class=“table_data”>
<#if pallets.pallets?has_content>
<#list pallets.pallets as pallet>
<!– Pallet details row –>
<tr style=“align:left; margin: 10px 0;”>
<!– … (columns for pallet details) –>
</tr>
<!– Boxes details rows –>
<#list pallet.boxes as box>
<!– … (columns for box details) –>
<#list box.items as item>
<!– … (columns for item details) –>
</#list>
</#list>
</#list>
<#else>
<tr>
<td align=“center” style=“font-weight: bold; font-size: 20px”>AVC ASN Details Not Created</td>
</tr>
</#if>
</table>
The template dynamically generates rows for each pallet, its associated boxes, and the items within those boxes. The ${variable} syntax is used to reference values from the nested JSON array within the template.
Implementing the Renderer
To integrate the data into the template, a renderer is created:
let renderer = render.create();
renderer.setTemplateById(tempId); // Template id is the id of the advanced pdf/html template.
// Add custom data source to the renderer
renderer.addCustomDataSource({
format: render.DataSource.OBJECT,
alias: “pallets”,
data: {
pallets: pallets
},
});
Here, the renderer is configured to use the specified template and provided with the nested JSON array as a custom data source.
Rendering as PDF
To finalize the process, the renderer can be instructed to generate the document in PDF format. The following code snippet achieves this:
// Render as PDF and return
let pdfFile = renderer.renderAsPdf();
In summary, the utilization of a nested JSON array in an Advanced PDF/HTML template offers a powerful way to organize and present hierarchical data, allowing for flexible and dynamic document generation.