Tuesday, 23 June 2015

System.SelectOption to JSON Object

I had a particular need to examine the SelectOptions used on a page and I'm ever so much happier using the Developer Console so, after reading this answer on Stack Overflow to this question (How to parse String with Javascript looks like object) I thought I'd have a go myself. Given the following HTML:

<p><strong>Raw SF SelectOption data:</strong></p>
<div id="sfData"></div>
<p><strong>SF data converted to string with an array of objects using Regex:</strong></p>
<div id="sfDataToStr"></div>
<p><strong>SF data converted to proper array of Objects:</strong></p>
<div id="strToObj"></div>

We can use the following JavaScript (using jQuery just to make things easier):

var sfData = 
    '[System.SelectOption[value="-- None --", label="-- None --", disabled="false"],' + 
    ' System.SelectOption[value="Special 1", label="Special 1", disabled="false"],' + 
    ' System.SelectOption[value="Special 2", label="Special 2", disabled="false"],' + 
    ' System.SelectOption[value="Special 3", label="Special 3", disabled="false"]]';
$(function(){
    $("#sfData").
        append(sfData).
        prepend($("<p></p>", {
            "text": "TYPE: " + typeof sfData}));
    var sfDataToStr = sfData.
        replace(/System.SelectOption\[(\w+)=/g, "{\"$1\":").
        replace(/\],\s?/g, "},").
        replace(/\",\s?(\w+)=/g, "\",\"$1\":").
        replace(/\]\]/g, "}]");
    $("#sfDataToStr").
        append(sfDataToStr).
        prepend($("<p></p>", {
            "text": "TYPE: " + typeof sfDataToStr}));
    var strToObj = JSON.parse(sfDataToStr);
    $("#strToObj").
        append(JSON.stringify(strToObj)).
        prepend($("<p></p>", {
            "text": "TYPE: " + typeof strToObj}));
});

To produce this markup:

<p><strong>Raw SF SelectOption data:</strong></p>
<div id="sfData"><p>TYPE: string</p>[System.SelectOption[value="-- None --", label="-- None --", disabled="false"], System.SelectOption[value="Special 1", label="Special 1", disabled="false"], System.SelectOption[value="Special 2", label="Special 2", disabled="false"], System.SelectOption[value="Special 3", label="Special 3", disabled="false"]]</div>
<p><strong>SF data converted to string with an array of objects using Regex:</strong></p>
<div id="sfDataToStr"><p>TYPE: string</p>[{"value":"-- None --","label":"-- None --","disabled":"false"},{"value":"Special 1","label":"Special 1","disabled":"false"},{"value":"Special 2","label":"Special 2","disabled":"false"},{"value":"Special 3","label":"Special 3","disabled":"false"}]</div>
<p><strong>SF data converted to proper array of Objects:</strong></p>
<div id="strToObj"><p>TYPE: object</p>[{"value":"-- None --","label":"-- None --","disabled":"false"},{"value":"Special 1","label":"Special 1","disabled":"false"},{"value":"Special 2","label":"Special 2","disabled":"false"},{"value":"Special 3","label":"Special 3","disabled":"false"}]</div>

Or this rendered markup:

Raw SF SelectOption data:

TYPE: string

[System.SelectOption[value="-- None --", label="-- None --", disabled="false"], System.SelectOption[value="Special 1", label="Special 1", disabled="false"], System.SelectOption[value="Special 2", label="Special 2", disabled="false"], System.SelectOption[value="Special 3", label="Special 3", disabled="false"]]

SF data converted to string with an array of objects using Regex:

TYPE: string

[{"value":"-- None --","label":"-- None --","disabled":"false"},{"value":"Special 1","label":"Special 1","disabled":"false"},{"value":"Special 2","label":"Special 2","disabled":"false"},{"value":"Special 3","label":"Special 3","disabled":"false"}]

SF data converted to proper array of Objects:

TYPE: object

[{"value":"-- None --","label":"-- None --","disabled":"false"},{"value":"Special 1","label":"Special 1","disabled":"false"},{"value":"Special 2","label":"Special 2","disabled":"false"},{"value":"Special 3","label":"Special 3","disabled":"false"}]

This makes a nice array of objects representing the original SF data which I can use later on, I've got a working example on JSFiddle. Hope it helps.

No comments:

Post a Comment