迭代 Json map，创建带有嵌入式链接的 html 表

Question

I'm reviewing an XML markupbuilder script that iterates through a json array (data from which is pulled from an external api) and displays the data in as an HTML table as follows:

import groovy.json.JsonSlurper
import groovy.xml.MarkupBuilder

def jsonString ="""
{
    "result": [
        {
            "u_change_record.number": "CHG0010042",
            "u_change_record.state": "Draft",
            "u_change_record.short_description": "test app req 5"
        },
        {
            "u_change_record.number": "CHG0010061",
            "u_change_record.state": "Draft",
            "u_change_record.short_description": "test"
        },
        {
            "u_change_record.number": "CHG0016010",
            "u_change_record.state": "Draft",
            "u_change_record.short_description": "Test Jira"
        },
        {
            "u_change_record.number": "CHG0010057",
            "u_change_record.state": "Draft",
            "u_change_record.short_description": "tesst"
        }
    ]
}
"""

def json = new JsonSlurper().parseText(jsonString)
def writer = new StringWriter()
def xml = new MarkupBuilder(writer)
xml.style{
mkp.yieldUnescaped """
table.aui {
  border-collapse: collapse;
  width: 100%
  }

table.aui>thead {
  font-family: arial, sans-serif;
  border-bottom: 2px solid #dfe1e6
  }

table.aui>tbody>tr, table.aui>tfoot>tr {
  background: white;
  color: #172b4d;
  font-family: arial, sans-serif;
  }
          
table.aui>tbody>tr>td,table.aui>tbody>tr>th,table.aui>tfoot>tr>td,table.aui>tfoot>tr>th,table.aui>thead>tr>td,table.aui>thead>tr>th {
  padding: 7px 10px;
  text-align: left;
  vertical-align: top
  }
          
table.aui>tbody>tr>th,table.aui>thead>tr>th {
  color: #7a869a;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.66666667;
  letter-spacing: 0;
  text-transform: none
  }
          
table.aui:not(.aui-table-list)>tbody>tr>td,table.aui:not(.aui-table-list)>tbody>tr>th,table.aui:not(.aui-table-list)>tfoot>tr>td,table.aui:not(.aui-table-list)>tfoot>tr>th {
  border-bottom: 1px solid #dfe1e6
  }
  """
       }
xml.table(class:'aui'){
   thead{
     tr{
        json.result[0].keySet().each{
           th it.split(/\./)[1]
        }
     }
   } 
   tbody{
      json.result.each{ res->
         tr{
            res.values().each{
               td it
            }
         }
      }
   }
}
writer.toString()

The code returns this table: https://i.stack.imgur.com/nFCIP.png

There's an additional thing I want to do with the table... I want to embed a link in each value in the number column, and I want to reference the number value in the link itself for each respective row. So if the number value for a row was CHG0010042, then the embedded link would be "my.test.com/CHG0010042", then for the next row value (CH0010061), the link would be "my.test.com/CH0010042", and so on and so forth.

What would I need to add to the tbody block in order to successfully do that?

Answer 1

Thanks @daggett!

I was able to expand on the iterator for the result values and reference the condition on the column header:

import groovy.json.JsonSlurper
import groovy.xml.MarkupBuilder

def jsonString ="""
{
    "result": [
        {
            "u_change_record.number": "CHG0010042",
            "u_change_record.state": "Draft",
            "u_change_record.short_description": "test app req 5"
        },
        {
            "u_change_record.number": "CHG0010061",
            "u_change_record.state": "Draft",
            "u_change_record.short_description": "test"
        },
        {
            "u_change_record.number": "CHG0016010",
            "u_change_record.state": "Draft",
            "u_change_record.short_description": "Test Jira"
        },
        {
            "u_change_record.number": "CHG0010057",
            "u_change_record.state": "Draft",
            "u_change_record.short_description": "tesst"
        }
    ]
}
"""

def json = new JsonSlurper().parseText(jsonString)
def writer = new StringWriter()
def xml = new MarkupBuilder(writer)
xml.style{
mkp.yieldUnescaped """
table.aui {
  border-collapse: collapse;
  width: 100%
  }

table.aui>thead {
  font-family: arial, sans-serif;
  border-bottom: 2px solid #dfe1e6
  }

table.aui>tbody>tr, table.aui>tfoot>tr {
  background: white;
  color: #172b4d;
  font-family: arial, sans-serif;
  }
          
table.aui>tbody>tr>td,table.aui>tbody>tr>th,table.aui>tfoot>tr>td,table.aui>tfoot>tr>th,table.aui>thead>tr>td,table.aui>thead>tr>th {
  padding: 7px 10px;
  text-align: left;
  vertical-align: top
  }
          
table.aui>tbody>tr>th,table.aui>thead>tr>th {
  color: #7a869a;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.66666667;
  letter-spacing: 0;
  text-transform: none
  }
          
table.aui:not(.aui-table-list)>tbody>tr>td,table.aui:not(.aui-table-list)>tbody>tr>th,table.aui:not(.aui-table-list)>tfoot>tr>td,table.aui:not(.aui-table-list)>tfoot>tr>th {
  border-bottom: 1px solid #dfe1e6
  }
  """
}
def headerMaps = [
  'u_change_record.number': 'Number',
  'u_change_record.state' : 'State',
  'u_change_record.short_description' : 'Short Description'
]
def number = json["result"]*."u_change_record.number"
xml.table(class:'aui'){
  thead {
    tr{
      json.result[0].keySet().each{
        th headerMaps[it] ?: it.split(/\./)[1]
      }
    }
  }
tbody {
  json.result.each{ res->
    tr{
      res.values().eachWithIndex{val, idx->
        def colHeader= res.keySet()[idx]
        if( colHeader == 'u_change_record.number'){
          td {
            a (href:"https://test.com/$val",target:'_blank') {
              mkp.yield val
              }
          }
        } else {
            td val
          }
      }
    }  
  }
}       
}
writer.toString()

Results are now as expected: view here