Create HTML view for JavaScript Array in VisualForce page

Question

I am having problem to print table in VF page using JS array. my code.

<apex:page controller="customController" >
    <script>
        var json = new Array();
        <apex:repeat value="{!appointmentList}" var="r">
            json.push('{!r}');
        </apex:repeat>
    </script>
</apex:page>

I tried console.log(), it didn't work. I went through lot of blogs but no luck.

I want something like below, need to do some format data using JS. In java script After data formatting, final list want to print on VF page. I am not good with JS things. Please help on this.

<apex:page controller="customController" >
<script>
    var json = new Array();
    <apex:repeat value="{!appointmentList}" var="r">
        json.push('{!r});

     <table width="100%" style="font-size:13px;">
         <tr>
            <td>
               <apex:outputText value="{0,date,EEEE - MMMM d, yyyy}" style="font-weight:bold;margin-bottom:2px;"> 
                   <apex:param value="{!s.startDateTime}" /> 
                </apex:outputText>&nbsp;
                <apex:outputText value="{0,date,h:mm a}">   
                    <apex:param value="{!s.startDateTime}" />
                 </apex:outputText> -&nbsp; 
                  <apex:outputText value="{0,date,h:mm a}">   
                      <apex:param value="{!s.endDateTime}" />
                  </apex:outputText><b>&nbsp;&nbsp;({!calendarProfile.userTimezone})</b>  
            </td>
         </tr>
      </table>
  </apex:repeat>
  </script>
  </apex:page>

end....

Answer 1

The repeat is evaluated server-side which means that javascript is not evaluated then. So the array.push() won't work.

If you REALLY need the array to be in javascript, try calling JSON.serialize() in the controller and JSON.parse() the result.

Eg - Controller:

public String controllerJSONString {get;set;}

//further down...
controllerJSONString = JSON.serialize(appointmentList);

Visualforce Page:

var jsonString = '{!controllerJSONString}';
var jsonArray = JSON.parse(jsonString);

Now you have that array that you wanted and can use it to perform your datetime calculations.

Answer 2

Writing apex:repeat in script tags will not work. Script tag only executes JavaScript in it and here you are writing Visualforce tags in it which will give an error in browser console when you execute this.

There are two cases here :

1. You can format the data in apex controller itself and then use in VF page
2. Format the data in JavaScript

Solution 1 -

If you are formatting the data in apex controller then you can use that variable in apex:repeat and can print that easily.

Solution 2 -

So if you need to format the data first and then to print in Visual force then, you can access the apex variables in JavaScript itself (in your script tag)

var sample = {!yourApexVariable}

This way you can access the data and can format it. Once formatting is done here you cannot use apex:repeat you need to write JavaScript here which will append the data on one of the html node through ID selector.

I would prefer Solution 1 for this.

Answer 3

Do some changes in your code and it will work fine

<apex:page controller="customController" >
<script>
    var json = new Array();
    json = '{!appointmentList}';
</script>

Thank you Amol Salve Salesforce Developer