Parse JSON object in UI Page

[Martin Pavlov]

Hello,

I've been searching all day how can I parse a JSON object in a UI page. However none of the solutions I've found worked for me.

The case is the following:

1) I have a UI action that opens a modal. In the script I am calling a GlideAjax to ScriptInclude

2 ) The ScriptInclude make a GlideRecord request and return stringified data.

3) The script from point 1) parse the data in the callback. The parsed data is an array of objects. The array is passed to the UI page with this code: 

var dialog = new GlideModal('manager_dialog', false, 600);
dialog.setTitle('Manage Visibility');
dialog.setPreference('data', data); // the data is the array from the script include
dialog.render();

4) In the UI page I want to use the array, loop over it, and display the information.

<?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 response = RP.getWindowProperties().get('data') // this should be the array from the script include
var parsedArray= JSON.parse(response);
</g:evaluate>
<j:forEach items="${parsedArray}" var="jvar_param">
<div>
<div>
<p>${jvar_param.name}</p>
</div>
<div>
<select>
<option>Private</option>
<option>Public</option>
</select>
</div>
</div>
</j:forEach>
</j:jelly>

Unfortunately, the data doesn't appear. If I pass the 'response' variable to the forEach tag, what I see is [object Obejct], [object Obejct] which appears to be a string. However, even parsing the data, the 'items' attribute does not seem to have access to the array.

I will be grateful for any kind of help! 

Thanks!

[Ankur Bawiskar]

Hi,

So you are sending the array of json objects?

while sending from the UI action send string by doing JSON.stringify(obj)

Can you share how data looks like?

Example: I assume array of json object looks like this; you need to enhance it as per yours

1) Sample data:

[{"name":"abel","email":"abel@example.com"},{"name":"beth","email":"beth@example.com"}]

2) please update as below and check once

<?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 jelly="true" object="true" var="jvar_jsonObj">
var response = RP.getWindowProperties().get('data') // this should be the string from UI action
var parsedArray= JSON.parse(response); // this will convert json string to json object
parsedArray;
</g:evaluate>

<j:forEach items="${jvar_jsonObj}" var="jvar_param">
<div>
<div>
<p>${jvar_param.name}</p>

<p>${jvar_param.email}</p>
</div>
<div>
<select>
<option>Private</option>
<option>Public</option>
</select>
</div>
</div>
</j:forEach>

</j:jelly>

Mark ✅ Correct if this solves your issue and also mark 👍 Helpful if you find my response worthy based on the impact.
Thanks
Ankur

[Ankur Bawiskar]

Is this answered?

if my answer helped you, kindly mark it as ✅ Correct & 👍Helpful so that it does not appear in unanswered list & close the thread.

Regards
Ankur

[Martin Pavlov · Accepted solution]

Thank you Ashutosh and Ankur, but those options did not work. I think that the problem was in the rest of my code. I managed to do it this way: 

1) I use GlideModal and pass the id I need with setPreference()

<g:evaluate jelly="true" object="true" var="jvar_target_id">
var response = RP.getWindowProperties().get('target_id');
response;
</g:evaluate>

2) Then instead of calling the ScriptInclude in the UI action, I call it here and store the object in the variable

<g:evaluate jelly="true" object="true" var="jvar_data" >
var utils = new PrivateDataUtils();
var result = utils.getRelated('${jvar_target_id}')
var data = JSON.parse(result);
data;
</g:evaluate>

3) Then I loop over the data with j:forEach

Thank you once again for the help!

[Ankur Bawiskar]

@Martin Pavlov 

if my answer helped you Kindly close the thread by marking Answer as ✅ Correct & 👍Helpful so that it does not appear in unanswered list.

Regards
Ankur