Read json object in csjs from ssjs

Question

I wanted to find out if its possible to send an array of json objects to csjs from ssjs in a sessionScope variable. When I try to use sesionScope.get in my script block. It doesn't run?

SSJS scriptsChartDojo.jss:

function createChartData()
{
    var resultArray = new Array();
    resultArray = [
    {y: 1978, text: "Blue Widget"},
    {y: 1669, text: "Brown Widget"},
    {y: 2017, text: "Green Widget"},
    {y: 334, text: "Orange Widget"},
    {y: 1051, text: "Pink Widget"},
    {y: 1545, text: "Purple Widget"},
    {y: 339, text: "Red Widget"},
    {y: 1067, text: "Yellow Widget"}];
    
    sessionScope.chartData = resultArray;
}

Xpage Source with CSJS in Scriptblock:

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" dojoParseOnLoad="true"
    dojoTheme="true" xmlns:xe="http://www.ibm.com/xsp/coreex">
    <xp:this.beforePageLoad><![CDATA[#{javascript:createChartData();}]]></xp:this.beforePageLoad>
    <xp:this.resources>
        <xp:dojoModule name="dojox.charting.Chart2D"></xp:dojoModule>
        <xp:script src="/scriptsChartDojo.jss" clientSide="false"></xp:script>
    </xp:this.resources>
    
    
    <xp:scriptBlock id="scriptBlock1">
        <xp:this.value><![CDATA[makeCharts = function() 
{
//Create a new  2D Chart
var pieChart = new dojox.charting.Chart2D("#{id:panel1}");
alert(sessionScope.get("chartData")); // Does not alert anything.
// Add  the only/default  plot for  the pie chart
pieChart.addPlot("default",  {type:  "Pie", radius: 150, fontColor:  "black", labels: false});
// Add  the data series 
pieChart.addSeries("Number  of Orders", sessionScope.get("chartData")); // Causes blank screen to load
//Render the  chart!
pieChart.render(); 
};
XSP.addOnLoad(makeCharts);]]></xp:this.value>
    </xp:scriptBlock>
    <xp:panel style="height:450px;width:450px" id="panel1"></xp:panel>
</xp:view>

Maybe useful: openntf.org/main.nsf/project.xsp?r=project/… — D.Bugger

Per Henrik Lausten Per Henrik Lausten · Accepted Answer · 2020-07-02T14:51:48

In the xp:scriptBlock you are combining client side JS with server side JS. The server side JS code must be in #{javascript:<code>} in order to be parsed. So do this:

<xp:scriptBlock id="scriptBlock1">
    <xp:this.value><![CDATA[
        makeCharts = function() {
            //Create a new  2D Chart
            var pieChart = new dojox.charting.Chart2D("#{id:panel1}");
            alert(sessionScope.get("chartData")); // Does not alert anything.
            // Add  the only/default  plot for  the pie chart
            pieChart.addPlot("default",  {type:  "Pie", radius: 150, fontColor:  "black", labels: false});
            // Add  the data series 
            pieChart.addSeries("Number  of Orders", #{javascript:sessionScope.get("chartData")});
            //Render the  chart!
            pieChart.render(); 
        };
        XSP.addOnLoad(makeCharts);
    ]]></xp:this.value>
</xp:scriptBlock>

Update: your SSJS Array() is not returned as you expect. If you use a simple String instead, you can see that the code works and sends data from SSJS to CSJS. Here's a simple example:

<xp:this.beforePageLoad><![CDATA[#{javascript:
    var resultArray = "[{y: 1978, text: \"Blue Widget\"},{y: 1669, text: \"Brown Widget\"},{y: 2017, text: \"Green Widget\"},{y: 334, text: \"Orange Widget\"},{y: 1051, text: \"Pink Widget\"},{y: 1545, text: \"Purple Widget\"},{y: 339, text: \"Red Widget\"},{y: 1067, text: \"Yellow Widget\"}]";
    
    sessionScope.chartData = resultArray;
}]]></xp:this.beforePageLoad>

<xp:scriptBlock id="scriptBlock1">
    <xp:this.value><![CDATA[
        makeCharts = function() {
            console.log(#{javascript:sessionScope.get("chartData")});
        };
        XSP.addOnLoad(makeCharts);
    ]]></xp:this.value>
</xp:scriptBlock>

Read json object in csjs from ssjs

2 Answers