How to take List of Account into a JavaScript variable on a Salesforce Visualforce page?

Hello Shariq,

JavaScript variable in Visualforce page

A simple example :

Visualforce :

<apex:page controller="javascriptLearning">
<script>
alert('{!lstAssignToArray}');
var myList = new Array();
myList = '{!lstAssignToArray}';
alert(myList);
</script>
</apex:page>

Apex Controller:

public with sharing class javascriptLearning {
public List<String> lstAssignToArray {get;set;}

public javascriptLearning()
{
lstAssignToArray = new List<String>();
lstAssignToArray.add('ABC');
lstAssignToArray.add('DEF');
lstAssignToArray.add('GHI');
lstAssignToArray.add('JKL');
lstAssignToArray.add('MNO');
lstAssignToArray.add('PQR');
lstAssignToArray.add('STU');
lstAssignToArray.add('VWX');
lstAssignToArray.add('YZ');
}
}

This works for me and in my alerts, I see that array has those values from the list!

You can take list of Account by using @RemoteAction:

Apex Class

public class AccountRemoteActionController {
public String accountName { get; set; }
public static List<Account> accounts { get; set; }

public AccountRemoteActionController(){}

@RemoteAction
global static List<Account> getAccount(String accountName){
String updatedAccName = '%'+accountName+'%';
accounts = [select id, name, phone, type, numberofemployees from Account where name LIKE :updatedAccName];
System.debug('Account Size : '+accounts.size());
return accounts;
}
}

VF Page

<apex:page controller="AccountRemoteActionController">
<script>
function getAccountJS(){
var accountNameJS = document.getElementById('accName').value;
AccountRemoteActionController.getAccount(accountNameJS,
function(result, event){
if(event.status){
for(var i=0; i < result.length; i++){
document.getElementById("{!$Component.theBlock.thePageBlockSection.theFirstItem.accId}").innerHTML = result[i].Id;
document.getElementById("{!$Component.theBlock.thePageBlockSection.theSecondItem.accNam}").innerHTML = result[i].Name;
document.getElementById("{!$Component.theBlock.thePageBlockSection.theThirdItem.accPhone}").innerHTML = result[i].Phone;
}
}else if(event.type === 'exception'){
document.getElementById("errors-js").innerHTML = event.message;
}else{
document.getElementById("errors-js").innerHTML = 'No Records Found..';
}
},{escape : true});
}
</script>
Account Name : <input id="accName" type="text" />
<button onclick="getAccountJS()">Get Account</button>
<div id="errors-js"></div>

<apex:pageBlock id="theBLock">
<apex:pageBlockSection id="thePageBlockSection" columns="4">
<apex:pageBlockSectionItem id="theFirstItem">
<apex:outputText id="accId"/>
</apex:pageBlockSectionItem>
<apex:pageBlockSectionItem id="theSecondItem" >
<apex:outputText id="accNam" />
</apex:pageBlockSectionItem>
<apex:pageBlockSectionItem id="theThirdItem" >
<apex:outputText id="accPhone" />
</apex:pageBlockSectionItem>
</apex:pageBlockSection>
</apex:pageBlock>
</apex:page>

Hope this will help you .

Thanks