How can I get the properties from a property Group of a Custom Control as an Object?

Question

I'm working on a Custom Control that displays markers on Google Maps. I have a couple of properties like "maptype" , "zoom", etc. It is easy to access them in Javascript: I can use #{javascript:compositeData.zoom} to get the value of the zoom property.

Now this is my problem: I use a group of properties for each marker. The name of the group is "marker" and a marker has 6 properties: "title", "layer", "infotext", "icon", "address" and "animation".

If I try to access the group with

var markers = #{javascript:compositeData.marker}; 

I'm getting an error in firebug:

missing : after property id var markers = [{layer=2, address=Oldenzaal, animation=DROP, icon=/ogo_notes.png...

an arrow is pointing to the first = between layer and 2 (I am not allowed to put in an image in stackoverflow)

If I use

var markers = #{javascript:'"' + compositeData.marker + '"'};

markers is an Object, but each Object contains a string with all the propperties of the marker.

I know I can do some coding to make an object of each string, but this is not easy if not all propperties are required. If a propperty is not required than it will not show up in the string.

I guess that there must be a more easy way to get each marker as an object so I can get the value of the icon with code like:

var icon = marker.icon

How can I do this?

Answer 1

You can use compositeData.marker.icon to get the property icon inside the group marker. If you have checked "Allow multiple instances" for the group then to get the properties you will have to go:

compositeData.marker[0].icon
compositeData.marker[1].icon

and so on...

Update 26-Apr-2012 (Naveen)

To use it with client side javascript you can try to put the value in a hidden input field like this:

<xp:inputHidden id="hdnIcon">
        <xp:this.defaultValue><![CDATA[#{javascript:var value = new Array();
for (var i=0 ; i<compositeData.marker.length ; i++) {
    value.push(compositeData.marker[i].icon);
}
return @Implode(value, ",");}]]></xp:this.defaultValue>
</xp:inputHidden>

The value of this hidden input field can be read through client-side javascript like this:

var value = document.getElementById("#{id:hdnIcon}").value.split(",");
for (var i=0 ; i<value.length ; i++) {
    <YOUR CODE>
}

Another way to do this can be to convert compositeData.marker and its contents to a JSON string and then run the client-side javascript on it.