AnsweredAssumed Answered

process JSON data to html table and display in pop-up

Question asked by mehranmalek on May 2, 2018
Latest reply on May 18, 2018 by mehranmalek

Hi everyone,

 

Is there a way to include a function in a popup that process JSON data and display them in HTML pop-up?

I have the code that process the JSON and display in HTML table. I don't know how to get this working in pop-up inside the webapp.

 

 

Additional info about what I'm trying to do:

I'm trying to integerate our record managment system with Webapp. So I would like to be able to send a request to


I’m trying to link documents (PDF, Word, etc. ) from our record management system to feature classes and have access to them through web applications. Each documents in record management system has GIS_ID which I’m using to link to each feature in my GIS layers. I have established a code to be able to process the JSON results which is created from our record management system. What I would like to do is to have the results to show up as a popup in my web application.
I have attached my HTML and JavaScript Code that process the JSON results received from our record management system and display them in HTML table. I have attached some screenshots. and here is my code:

 

<!DOCTYPE html>
<html>
<head>
<title> Json to table using Ajax Jquery getJSON</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="table-responsive">
<h1> Record Drawings</h1>
<br />
<table class="table table-bordered table-striped" id="drawing_table">
<tr>
<th>RecordNumber</th>
<th>RecordTitle</th>
<th>Uri</th>

</tr>
</table>
</div>
</div>

</body>

</html>
<script>

$(document).ready(function(){
$.getJSON("http://HPRMServiceAPI/Record?q=GISID:*{GIS_ID}*&format=json&properties=number,title",
function(data){

var drawing_data ='';
$.each(data['Results'], function(key, value){
drawing_data += '<tr>';
drawing_data += '<td>' +value.RecordNumber.Value+'</td>';
drawing_data += '<td><a href="http://HPRMServiceAPI/Record/' + value.Uri + '/file/document" target="_blank">' + value.RecordTitle.Value + '</a></td>';
drawing_data += '<td>' +value.Uri+'</td>';
drawing_data += '<tr>';
});
$('#drawing_table').append(drawing_data);
});
});
</script>

Outcomes