4

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....

  • in your javascript code you are pushing data into array which is not needed. directly use the variable 'appointmentList' in apex:repeat. set its value in your server side controller – RedDevil Jun 28 '17 at 4:33
  • I want to do date conversion. So I need to use JS, to add local browser offset to it. – Eswar Jun 28 '17 at 4:36
3

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.

| improve this answer | |
  • Can you please albrate VF part with example? I mean how to render. – Eswar Jun 28 '17 at 13:46
  • It's not clear what you are intending to do with the javascript array - I can see you want to output a time value, but in your repeat you are not referencing the javascript array that you said you wanted to use... you seem to be using a variable s which I don't think exists – Caspar Harmer Jun 28 '17 at 18:50
  • This from a user: Edit: After doing what Caspar Harmer explained, let's say your table id is table1, you can do- <table width="100%" style="font-size:13px;" id="table1"></table> <script> var tableCode = ''; for (var i=0; i<jsonArray.length; i++) { tableCode += '<tr><td>' + <whatever_you_want_to_print with jsonArray[i] object> + '</td></tr>' } document.getElementById('table1').innerHTML = tableCode; </script> I don't think JS provides date format conversion out of the box, you need to do it yourself/ with the help of any 3rd party library. – Caspar Harmer Jun 28 '17 at 19:38
0

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.

| improve this answer | |
0

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

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.