Multiple HTML Table from JSON File (using XML Generator)

I am trying to build HTML Table to publish as an email from a JSON File. I am using an in-built XML Parser (in SnapLogic) to do so.

Following is structure of JSON file -

[
{"source_system_group = group1,
"source_system_details" : {
                   "Details_1": value1, "Details_2": value2,
                   }
}
{"source_system_group = group2
"source_system_details" : {
                   "Details_1": value1, "Details_2": value2,
                   }
}
{"source_system_group = group3,
"source_system_details" : { 
                   "Details_1": value1, "Details_2": value2,
                   }
}
]

I have HTML Code to create multiple table, one for each of the groups, and populate columns as system_details (There are multiple records for details). I cannot populate the table please help me

I am using following HTML code but cannot populate

<html>
    <head>
        <style>
            table {
                width: 100%;
                border: 1px solid black; 
            }
            thead th {
                background: black;
                color: white;
                border: 1px solid black
            }
            tbody tr:nth-child(even) {
                background: #D9D9D9;
            }
            td {
                padding: 5px;
                border: 1px solid black;
            }
        </style>
    </head>
    <body>
        <p>Hi, </p>
        <p>Following is the status of data load </p>
        <p></p>
        <table>
            <thead>
                <tr>
                    <th>Detail_1</th>
                    <th>Detail_2</th>
                </tr>
            </thead>
            <tbody>
            #foreach ($data in $source_system_group)
                <tr>
                <!--check for load value before selection of the table values-->
                    <td>$data.detail_1</td>
                    <td>$data.detail_2</td>
                </tr>
            #end
            </tbody>
        </table>
    </body>
</html>

Solution

You JSON is invalid

It should look like this

[{
    "source_system_group": "group1",
    "source_system_details": {
      "Details_1": "value1",
      "Details_2": "value2"
    }
  },
  {
    "source_system_group": "group2",
    "source_system_details": {
      "Details_1": "value1",
      "Details_2": "value2"
    }
  },
  {
    "source_system_group": "group3",
    "source_system_details": {
      "Details_1": "value1",
      "Details_2": "value2"
    }
  }
]

You are accessing the content of the JSON incorrectly

Try this

<tbody>
#foreach ($data in $source_system_group)
    <tr>
        <!--check for load value before selection of the table values-->
        <td>$data.source_system_details.Details_1</td>
        <td>$data.source_system_details.Details_2</td>
    </tr>
#end
</tbody>