How to access Map values in VF page

Question

I have a requirement of getting map values in vf page in the js Function. Here is the code i am using

 Public class AgController{
        public static Map<Id,String> errorByAccountId { get; set; }
        public static void updateData(){
            errorByAccountId = new Map<Id,String>();
            errorByAccountId.put(acclistset[i].id,String.valueOf('Error saving company "' + acclistset[i].name + '": ' + err.getMessage()) );
        }
    }

IN VF PAGE

function checkSaveUnassignComplete()
    {
           var errorIdByErrorMsg = "{!errorByAccountId}";
        console.log('errorid',errorIdByErrorMsg);
    }

THIS IS HOW VALUE COMES IN CONTROLLER(Showing the debug from controller)

map value---->{0010r00000PRyZFAA1=Error saving company "Test-Rt847": There's a problem with this state, even though it may appear correct. Please select a state from the list of valid states., 0010r00000QQF8qAAH=Error saving company "Test-Rt472": There's a problem with this state, even though it may appear correct. Please select a state from the list of valid states.} However If use List instead of Map I am able to get it in VF page How can I achieve this using Map?

Answer 1

One way to do this is to use an iterator:

function checkSaveUnassignComplete() {
  var errorIdByErrorMsg = {
  <apex:repeat value="{!errorByAccountId}" var="key">
    "{!key}": "{!JSINHTMLENCODE(errorByAccountId[key])}",
  </apex:repeat>
  };
}

NOTE: JavaScript allows a trailing comma, so no extra logic is required here.

Alternatively, consider using the output via JSON:

// Apex //
public String getErrorJson() {
  return JSON.serialize(errorByAccountId);
}

...

// JavaScript //
function checkSaveUnassignComplete() {
  var errorIdByErrorMsg = {!errorJson};
}

This is pretty useful for Maps and other complicated objects.