So I needed to create a selection list of all the US states, as a dialog control and also as a selection list in my components JSP.

So rather than hard code values in my dialog or as html <option> values, I thought it would be cleaner to use a JSON array of US state objects.

I found a JSON list of US states on the web, and I modifed it to have the following structure
[
   {text:"Alabama", label:"Alabama",value:"AL"},
...
...
    {text:"Wyoming", label:"Wyoming",value:"WY"}
 ]

and I saved it to a file called states.json, and I uploaded this file into the CQ repository at  apps/myapp/resources/json/states.json

To create the state selection list in my dialogue I created a cq:widget node that had the following properties

<state
    jcr:primaryType="cq:Widget"
    fieldLabel="State"
    name="./state"
    optionsProvider="function(path, record) { return CQ.Util.formatData(CQ.Util.eval('/apps/myapp/resources/json/states.json')); }"
    type="select"
    width="200"
    xtype="selection"/>

The file is read by the snippet of ExtJS in the optionsProvider property.

The next bit of Java code in my JSP reads the JSON file that is in the repository, into a String, and then I use the
org.apache.sling.commons.json api to read the json properties, then I store it in Collection, and then iterate through it using JSTL

<%@ page import="java.util.*,        
org.apache.sling.commons.json.*,        
com.day.cq.wcm.api.PageFilter,        
com.day.cq.wcm.api.NameConstants,        
com.day.cq.wcm.api.Page"%>

List<Map<String,String>> stateItems = new ArrayList<Map<String,String>>();

//Location of the state.json file that contains the list of US states in a JSON Object
String jsonURL="/apps/myapp/resources/json/states.json/jcr:content";

Resource res=resourceResolver.getResource(jsonURL);
ValueMap jcrProp=res.adaptTo(ValueMap.class);
String jsonData=jcrProp.get("jcr:data",String.class);
if (jsonData != null) {    
    try {        
       JSONArray statesArray = new JSONArray(jsonData);                
       for(int i = 0; i < statesArray.length(); i++) {          
          Map<String,String> stateItem = new HashMap<String,String>();          
          JSONObject jsonObject = statesArray.getJSONObject(i);          
          String stateValue=jsonObject.getString("value");          
          String stateText=jsonObject.getString("text");             
          stateItem.put("text",stateText);            
          stateItem.put("value",stateValue);            
          stateItems.add(stateItem);        
       }            
  } catch (Exception e) {
    log.error("Invalid JSON:" + jsonData);     }
}
pageContext.setAttribute("stateItems",stateItems);
%>

<!-- JSTL code-->
<select
id="stateSelector"name="stateSelector">
<optionid=""value="">Select a State</option>
<c:forEachitems="${stateItems}" varStatus="status"var="item">
<optionclass="${item.newWindow}"id="app"url="${item.url}"value="${item.value}">${item.text}</option>
</c:forEach>
</select>