Thank you very much for providing the sample.
Using these as a reference, I will create the output I envision while understanding it.
Original Message:
Sent: Feb 22, 2024 12:18 PM
From: James Alexander
Subject: Sample output JSON Data to HTML Form
Below is a html document with a bit of JavaScript that will make an AJAX request to HB.js and attempt to automatically render the content into html. If a root element is an array that contains objects it will create a table, if it is a scalar value it will display it in a name value pair. It's pretty simplistic and makes assumptions about the structure of the JSON document that won't hold true much of the time, but it should give you some ideas on how you can display JSON produced from HB.js. The html/JavaScript needs to be stored in (via put from eclipse or VSCode) and retrieved from HB.js or you will run into authentication and CORS (google it) issues. The line url: "/hbscript/testdata.json", (line number 37) needs to be changed to point to your web service. Below is the sample JSON I tested with along with what the output looks like.
<!DOCTYPE html><html><head> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script type="text/javascript"> function table (t) { if (t.length < 1) return ''; let headers = ''; let body = ''; for (let row = 0; row < t.length; row++) { body += '<tr>'; for (let colName in t[row]) { if (row === 0) headers += `<th>${colName}</th>`; let cell = t[row][colName]; if(Array.isArray(cell)) { if (typeof cell[0] === 'object') { body += `<td>${table(cell)}</td>`; } else { body += `<td>${cell.toString()}</td>`; } } else { body += `<td>${cell.toString()}</td>`; } } body += '</tr>'; } return `<table><thead><tr>${headers}</tr></thead><tbody>${body}</tbody></table><br/><br/><br/>`; } $(document).ready(function(){ $.ajax({ url: "/hbscript/testdata.json", dataType: 'json', type: 'get', cache:false, success: function(data){ console.log(data); for (let section in data) { if (Array.isArray(data[section])) { $("#tables").append(`<h2>${section}</h2>${table(data[section])}`); } else { $("#elements").append(`<tr><td><b>${section}</b></td><td>${data[section].toString()}</td></tr>`); } } }, error: function(d){ console.log("error"); alert("404. Please wait until the File is Loaded."); } }); }); </script> <style> td { padding-left: 15px; padding-right: 15px; } </style></head><body> <table id="elements"> <thead> <th>Field Name</th> <th>Value</th> </thead> </table> <div id="tables"></div></body></html>
{ "quotes": [ { "num": 1, "userid": "cisxjra", "company": "Casey Import Export", "currentPrice": 79, "costToSell": 7, "costToBuy": 10, "pricePrevious": [ 79, 77, 78, 72, 70, 65, 63, 59 ], "sharesOwned": 2486, "totalValue": 196394, "message": "Request Completed OK" }, { "num": 2, "userid": "cisxjra", "company": "Glass and Luget Plc", "currentPrice": 19, "costToSell": 2, "costToBuy": 2, "pricePrevious": [ 19, 22, 25, 20, 16, 20, 22, 17 ], "sharesOwned": 4665, "totalValue": 88635, "message": "Request Completed OK" }, { "num": 3, "userid": "cisxjra", "company": "Headworth Electrical", "currentPrice": 124, "costToSell": 11, "costToBuy": 12, "pricePrevious": [ 124, 131, 133, 133, 133, 137, 138, 141 ], "sharesOwned": 4824, "totalValue": 598176, "message": "Request Completed OK" }, { "num": 4, "userid": "cisxjra", "company": "My Great Software", "currentPrice": 163, "costToSell": 15, "costToBuy": 10, "pricePrevious": [ 163, 163, 162, 160, 161, 159, 156, 157 ], "sharesOwned": 4639, "totalValue": 756157, "message": "Request Completed OK" } ], "transactions": [ { "num": 1, "shares": 1, "action": "Buy", "company": "Casey Import Export", "message": "Request Completed OK" }, { "num": 2, "shares": 1, "action": "Buy", "company": "Glass and Luget Plc", "message": "Request Completed OK" }, { "num": 3, "shares": 1, "action": "Buy", "company": "Headworth Electrical", "message": "Request Completed OK" }, { "num": 4, "shares": 1, "action": "Buy", "company": "My Great Software", "message": "Request Completed OK" } ], "errors": [], "myName": "James Alexander", "myCar": "Nissan Frontier"}
Original Message:
Sent: Feb 20, 2024 05:51 AM
From: Kazuhiko Furuishi
Subject: Sample output JSON Data to HTML Form
Hi,
I was able to output JSON data with JAVA via HB.js for based on Trader Application (TRAD).
If I can output this JSON data to HTML form, I think we can appeal the usefulness of HB.js to mainframe end users.
However, I'm a mainframe engineer, so I don't have basic HTML skills.
I would like to show mainframe end users image of JSON data output to HTML form as soon as possible.
Are there any samples like this?
Best regards,
Kazuhiko Furuishi