How to Convert this JSON into a Table

[Community Alums]

Html:

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
<g:evaluate>
var userGr = new GlideRecord('sys_user');
var sysid = RP.getParameterValue('sysparam_user');
userGr.get(sysid);

var tableObj = new global.GlideSystemAjax().getUser(sysid);
</g:evaluate>

<div class="main-content">
<div class="diagnostics-inputs">
<g:kb_reference_field id="user" label="${gs.getMessage('Select user')}" displayvalue="${userGr.getDisplayValue('name')}" value="${userGr.getUniqueValue()}" table="sys_user" query="active=true"/>
</div>

<div class="row form-group" style="padding-left:18px;margin-top:30px">
<div class="col-xs-4 col-md-2"/>
<button id="diagnose" type="button" aria-label="${gs.getMessage(' Search ')}" class="btn btn-primary" onclick="showResults()">
${gs.getMessage('Search')}
</button>
</div>
</div>

<table border ='3' >
<!-- <table width="100%" style="table-layout:fixed;"> -->
<tr>
<th>Table</th>
<th>Field</th>
<th>Count</th>
</tr>
<tbody id="myTable"></tbody>
</table>

<div id="results">
${tableObj}

</div>

</j:jelly>

Script Include :

getUser: function(sysid) {
var userID = sysid;
if (userID != '') {

var count = 0;
var arr = [];
var obj = ["sys_script_execution_history", "sys_ui_list", "sys_ui_navigator_history", "sc_cart", "sn_grc_unique_user_usage", "sn_km_mr_st_kb_knowledge", "sys_mass_encryption_job", "sys_email", "ua_app_usage", "sys_ui_bookmark", "sys_user_preference", "text_search", "cxs_relevant_doc", "signature_image", "sys_rollback_context", "wf_workflow_version", "sys_history_line0000", "label_history", "sys_user_presence", "sp_log"];
gs.info(obj);

var gr = new GlideRecord('sys_dictionary');
gr.addEncodedQuery('nameNOT IN' + obj);
gr.addQuery('internal_type=reference^ORinternal_type=glide_list^reference=sys_user');
gr.query();
while (gr.next()) {
try {
var tableName = gr.getDisplayValue('name');
var fieldName = gr.getDisplayValue('element');
var referenceName = gr.getDisplayValue('reference');
var grTab = new GlideRecord(tableName);
grTab.addEncodedQuery(fieldName + '=' + userID);
grTab.query();
if (grTab.next()) {
count = grTab.getRowCount();
arr.push({
"table": tableName,
"field": fieldName,
"count": count
});
}
} catch (e) {}
}
}
return JSON.stringify(arr);

},

[Vasantharajan N · Accepted solution]

@Community Alums - Please try the below UI Page code 

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
	<g:evaluate var="jvar_tableObj" object="true">
		var userGr = new GlideRecord('sys_user');
		var sysid = RP.getParameterValue('sysparam_user');
		userGr.get(sysid);
		var tableObj = JSON.parse(new global.GlideSystemAjax().getUser(sysid));		
		tableObj;
	</g:evaluate>

	<div class="main-content">
		<div class="diagnostics-inputs">
			<g:kb_reference_field id="user" label="${gs.getMessage('Select user')}" displayvalue="${userGr.getDisplayValue('name')}" value="${userGr.getUniqueValue()}" table="sys_user" query="active=true"/>
		</div>

		<div class="row form-group" style="padding-left:18px;margin-top:30px">
			<div class="col-xs-4 col-md-2"/>
			<button id="diagnose" type="button" aria-label="${gs.getMessage(' Search ')}" class="btn btn-primary" onclick="showResults()">
				${gs.getMessage('Search')}
			</button>
		</div>
	</div>

	<table class="table table-bordered">
		<!-- <table width="100%" style="table-layout:fixed;"> -->
		<tr>
			<th>Table</th>
			<th>Field</th>
			<th>Count</th>
		</tr>
		<tbody id="myTable"></tbody>


		<div id="results">
			<j:forEach items="${jvar_tableObj}" var="jvar_array_item">	
				<tr>
					<td>${jvar_array_item.table}</td>
					<td>${jvar_array_item.field}</td>
					<td>${jvar_array_item.count}</td>		

				</tr>   
			</j:forEach>		

		</div>

	</table>

</j:jelly>

Result: