Using JavaScript Variables for Visualforce Output

Question

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>

Answer 1

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.

Answer 2

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/