0

I'm new to using JavaScript in Visualforce and have a basic question that I'm finding incredibly hard to locate the answer to:

I've brought data from my controller into a JS variable via JSON.serialize, and I'd like to take a look at what the object looks like when printed out. How do I print out JS variables onto a VF page? My goal is to create a table that outputs a list of contacts after I've applied my business logic to it. What would be the syntax to throw my array into something like an apex:repeat ?

What I've got:

Controller

public with sharing class ContactDynamicSearchController {

    // Instance Variables
    public List<Contact> contacts {get;set;}

    // send query results to page
    public List<Contact> runQuery() {
        return [Select id, firstname, lastname From Contact];
    }

}

VF Page:

<apex:page showHeader="true" sidebar="true" controller="ContactDynamicSearchController">
<script>
    var contactArray = JSON.parse('{! contacts}');
    // How do I print this out for testing?
</script>

<apex:pageBlock >
    <h2>JavaScript version: </h2>
    <h2>APEX Table Version:</h2>
    <apex:pageBlockSection >
        <apex:pageBlockTable value="{! contacts }" var="ct">
            <apex:column value="{! ct.id }">
                <apex:facet name="header">
                    ID
                </apex:facet>
            </apex:column>
            <apex:column value="{! ct.firstname }">
                <apex:facet name="header">
                    First Name
                </apex:facet>
            </apex:column>    
            <apex:column value="{! ct.lastname }">
                <apex:facet name="header">
                    Last Name
                </apex:facet>
            </apex:column>
        </apex:pageBlockTable>
    </apex:pageBlockSection>
</apex:pageBlock>

0
0

You could use alert statements or console.log() to see it on the browser debug console.

when you are on chrome, f12-->run the functionality-->open debug console on chrome debug panel-->you should see the console.log() value you want to debug on the panel

You can refer to the following link, How do I start to debug my own Visualforce/JavaScript?

And you can use a button or something to show output on vf page. So when you click the button, you can get the string from controller and render output on the screen.

1
  • I think this will be the way to go. I was hoping to iterate a basic page output scenario like binding it to an actionfunction, but I'm not sure if that's possible or if visualforce has anything for arrays of objects. – Fred O'Hara Jun 13 '16 at 20:09
0

There are a few ways to do this, I am not sure why you are using Javascript because it cannot write to a pageblocktable. Quick and easiest way to output to a page would be:

public with sharing class ContactDynamicSearchController {


    // send query results to page
    public List<Contact> getcontacts() {
        return [Select id, firstname, lastname From Contact];
    }

}



<apex:pageBlock >
    <apex:pageBlockSection >
        <apex:pageBlockTable value="{! contacts }" var="ct">
            <apex:column value="{! ct.id }">
                <apex:facet name="header">
                    ID
                </apex:facet>
            </apex:column>
            <apex:column value="{! ct.firstname }">
                <apex:facet name="header">
                    First Name
                </apex:facet>
            </apex:column>    
            <apex:column value="{! ct.lastname }">
                <apex:facet name="header">
                    Last Name
                </apex:facet>
            </apex:column>
        </apex:pageBlockTable>
    </apex:pageBlockSection>
</apex:pageBlock>

That will output to the pageblocktable.

If you plan on adding a query when it changes as the user inputs data you can do that. Here's a reference: http://gtr.net/how-to-build-a-simple-search-page-using-visualforce/

OR

http://blog.jeffdouglas.com/2010/07/13/building-a-dynamic-search-page-in-visualforce/

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.