HTML equivalent of ScriptUI ListBox?

Question

Hello,
forgive my ignorance: what is in the HTML land the proper way to emulate good old ScriptUI Listbox component?
I thought to use <select> specifying the size property, like:
<select size=3>
  <optgroup label="Swedish Cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>
  <optgroup label="German Cars">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>
</select>
which gives:
but it looks quite primitive compared to ListBox (no header, no columns, etc). Am I missing a different element which could fit better?
Thank you!
Davide Barranca
www.davidebarranca.com
www.cs-extensions.com

Answer 1

Sorin, at the moment you can only pass string values between JSX and an HTML extension / AngularJS. With complex javascript objects this is usually done with the JSON.stringify function.
Sadly, Extendscript does not support JSON.stringify at the moment.
I went through the work of building my own Extendscript stringify function a few months ago and I'll go ahead and post it here. I've been meaning to refactor this and make it smaller, but it works just fine, though it could possibly be more efficient.
function BuildJSONArray(arrayObjectList)
    var preString = '[';
    var postString = "";
    if(arrayObjectList.length > 0)
        for(var i = 0; i < arrayObjectList.length; i++)
            if( Object.prototype.toString.call( arrayObjectList[i] ) === '[object Array]' )
                if(arrayObjectList[i].title != undefined)
                    preString += '"' + arrayObjectList[i].title + '":';
                preString += BuildJSONArray(arrayObjectList[i]); //recursion is FUN!
            else if( Object.prototype.toString.call( arrayObjectList[i] ) === '[object Object]' )
                preString += BuildJSONObject(arrayObjectList[i]);
            else
                preString += arrayObjectList[i].toString() + ",";
        postString = preString.substr(0, preString.length - 1);
    else //exception for an empty array
        postString += '[';
    postString += ']';
    postString += ',';
    return postString;
function BuildJSONObject(objToBuild)
    var preString = '{';
    var postString = "";
    for(var key in objToBuild)
        if(objToBuild.hasOwnProperty(key) == true)
            preString += BuildJSONProperty(key, objToBuild[key]);
    if(preString == '{') //exception for an empty object
        postString += preString;
        postString += '},';
    else
        postString = preString.substr(0, preString.length - 1);
        postString += '},';
    return postString;
function BuildJSONProperty(propToBuild, valOfProp)
    var propJSON = '"';
    propJSON += propToBuild.toString();
    propJSON += '":';
    if(typeof valOfProp == 'string') //wrap in double quotes if it's a string
        propJSON += '"';
        propJSON += valOfProp;
        propJSON += '"';
    else if( Object.prototype.toString.call( valOfProp ) === '[object Array]' ) //array exception
        propJSON += BuildJSONArray(valOfProp);
        propJSON = propJSON.substr(0, propJSON.length - 1); //remove the comma, as one is added at the end of this function
    else if( Object.prototype.toString.call( valOfProp ) === '[object Object]' ) //object exception
        propJSON += BuildJSONObject(valOfProp);
        propJSON = propJSON.substr(0, propJSON.length - 1); //same idea...removing the comma
    else
         propJSON += valOfProp;
    propJSON += ",";
    return propJSON;
HOW TO: Put the javascript objects you want to stringify into an array and call BuildJSONArray( ). It will return a string. Pass that string to your extension and rebuild it as javascript using a simple JSON.parse( ) function. Boom - done. Now you can implement ng-grid and other angular things.