1

I need to pass several Objects from Apex to visualforce, geocode them using the google javascript api, and then pass them back to Apex.

I've been attempting to accomplish this by creating a consisting of id/address pairs, converting this into a string, and then passing the string into javascript. However, I'm unsure how to properly iterate through these key value pairs once in javascript.

public class ControllerJSGeo{
    public String pId;
    public String getlocList{get;set;}


    public ControllerJSGeo(ApexPages.StandardController stdController){
        pId = ApexPages.CurrentPage().getParameters().get('id');
    getlocList();

    }


public void getlocList(){
Map<Id,String> getList=new Map<Id,String>();

Property__c p=[SELECT Name, GeoCoord__c,GeoCoord__latitude__s,GeoCoord__longitude__s,Tenant_Sub_Type__c FROM property__c WHERE id =:pId limit 1];
List<Property__c> rawPS=[select id,name,GeoCoord__latitude__s,GeoCoord__longitude__s,property_address__c from property__c where Tenant_Sub_Type__c=:p.Tenant_Sub_Type__c ];

        for(Property__c rawP : rawPS){
        if (rawP.GeoCoord__latitude__s==null&&rawP.GeoCoord__longitude__s==null){
       getList.put(rawP.id,rawP.property_address__c);
        }       
}
getlocList=JSON.serialize(getList);
}

}

VISUALFORCE:

<apex:page standardController="Property__c">

<head>

<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
<script type="text/javascript"> 

$(document).ready(function() {

  var myOptions = {
    zoom: 18,
    mapTypeId: google.maps.MapTypeId.HYBRID,
    mapTypeControl: true,
    scrollwheel: false
  }

  var map;
  var marker;

  var geocoder = new google.maps.Geocoder();
  var address = "{!Property__c.Property_Address__c}, " + "{!Property__c.City__c}, " + "{!Property__c.State__c} " + "{!Property__c.Zip_Postal_Code__c}}";

  var infowindow = new google.maps.InfoWindow({
    content: "<b>{!Property__c.Name}</b><br>{!Property__c.Property_Address__c}<br>{!Property__c.City__c}, {!Property__c.State__c} {!Property__c.Zip_Postal_Code__c}"
  });

  geocoder.geocode( { address: address}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK && results.length) {
      if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {

        //create map
        map = new google.maps.Map(document.getElementById("map"), myOptions);
        map.setTilt(45);


        //center map
        map.setCenter(results[0].geometry.location);

        //create marker
        marker = new google.maps.Marker({
            position: results[0].geometry.location,
            map: map,
            title: "{!Property__c.Name}"
        });

        //add listeners
        google.maps.event.addListener(marker, 'click', function() {
          infowindow.open(map,marker);
        });
        google.maps.event.addListener(infowindow, 'closeclick', function() {
          map.setCenter(marker.getPosition()); 
        });

var json={!getlocList};
 console.log(json); 

     }

    } else {
      $('#map').css({'height' : '15px'});
      $('#map').html("Oops! {!Property__c.Name}'s billing address could not be found, please make sure the address is correct.");
      resizeIframe();
    }
  });

  function resizeIframe() {
    var me = window.name;
    if (me) {
      var iframes = parent.document.getElementsByName(me);
      if (iframes && iframes.length == 1) {
        height = document.body.offsetHeight;
        iframes[0].style.height = height + "px";
      }
    }
  }

});
</script>

<style>
#map {
  font-family: Arial;
  font-size:12px;
  line-height:normal !important;
  height:800px;
  background:transparent;
}
</style>

</head>

<body>
<div id="map"></div> 
</body> 
</apex:page>

This is the part that passes the variable in:

var json={!getlocList};
 console.log(json);

this gets output to the console:

Object {a00630000021YOLAA2: null, a00630000021YOQAA2: null, a00630000021YOVAA2: "5315 W Rosecrans Ave"}

Obviously, I can't iterate over it by the key, because that's going to be different for each different id. Is there anyway I can do the equivalent to array[0], where the name of the string is not important, but its index?

Improve this question
7
  • try something like for (var key in Object.keys(json)) { console.log(json[key]); }.
    – battery.cord
    Jun 22, 2016 at 17:20
  • the console shows: undefined
    – MRG
    Jun 22, 2016 at 17:29
  • Can you post a sample of the json generated from salesforce?
    – battery.cord
    Jun 22, 2016 at 17:34
  • {a00630000021YOLAA2: null, a00630000021YOQAA2: null, a00630000021YOVAA2: "5315 W Rosecrans Ave"}
    – MRG
    Jun 22, 2016 at 17:39
  • 1
    Whoops- you dont need the Object.keys(...) call in the for loop. Try using just for (var key in json) { console.log(key + ':' + json[key]); }. That should print out each key and value.
    – battery.cord
    Jun 22, 2016 at 17:46

1 Answer 1

Reset to default
2

To iterate over object keys in javascript, you can use the following code snippet:

for (var key in json) { 
    console.log(key + ':' + json[key]);
}

You can read more about this method, and some best practices for iterating over javascript objects via keys on this related question. You can also learn more about for...in loops in javascript on MDN.

Improve this answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .