Dev - An easy way to get a data structure from server to Javascript in client browser

[Vinay Agarwal]

Hello,

 

Generally it is pretty complex to get a non-trivial data structure in client browser’s Javascript as shown in the example below from order application. It is a “bit” easier by using org.JSON library (BSD like license). You have to create the target data structure using JSONObject (a Map) and JSONArray (a List) instead of the usual Maps and Lists but this is generally not a problem since these objects can do everything similar. Once the data structure is built (e.g. myDataStruct), all that needs to be done to serialize it in jsBuf (from below) is this

            jsBuf = myDataStruct.toString();

 

Hope it is helpful.

 

Regards,

Vinay Agarwal

 

From order/webapp/ordermgr/WEB-INF/actions/entry/catalog/productDetail.bsh:

-------------------------------------------------------------------------------------------------------

                        jsBuf = new StringBuffer();

                        jsBuf.append("<script language=\"JavaScript\">");

                        jsBuf.append("var DET = new Array(" + variantTree.size() + ");");

                        jsBuf.append("var IMG = new Array(" + variantTree.size() + ");");

                        jsBuf.append("var OPT = new Array(" + featureOrder.size() + ");");

                    jsBuf.append("var VIR = new Array(" + virtualVariant.size() + ");");

                        jsBuf.append("var detailImageUrl = null;");

                        for (li = 0; li < featureOrder.size(); li++) {

                            jsBuf.append("OPT[" + li + "] = \"FT" + featureOrder.get(li) + "\";");

                        }

                    for (li = 0; li < virtualVariant.size(); li++) {

                        jsBuf.append("VIR[" + li + "] = \"" + virtualVariant.get(li) + "\";");                 

                    }

 

                        // build the top level

                        topLevelName = featureOrder.get(0);

                        jsBuf.append("function list" + topLevelName + "() {");

                        jsBuf.append("document.forms[\"addform\"].elements[\"FT" + topLevelName + "\"].options.length = 1;");

                        jsBuf.append("document.forms[\"addform\"].elements[\"FT" + topLevelName + "\"].options[0] = new Option(\"" + featureTypes.get(topLevelName) + "\",\"\",true,true);");

                        if (variantTree != null) {

                            vTreeKeySet = variantTree.keySet();

                            vti = vTreeKeySet.iterator();

                            firstDetailImage = null;

                            firstLargeImage = null;

                            counter = 0;

                            while (vti.hasNext()) {

                                key = vti.next();

                                value = variantTree.get(key);

                                opt = null;

                                if (featureOrder.size() == 1) {

                                    opt = value.iterator().next();

                                } else {

                                    opt = "" + counter;

                                }

                                // create the variant content wrapper

                        contentWrapper = new ProductContentWrapper(((GenericValue) imageMap.get(key)), request);

 

                                // get the default image

                                virtualDetailImage = productContentWrapper.get("DETAIL_IMAGE_URL");

                                virtualLargeImage = productContentWrapper.get("LARGE_IMAGE_URL");

 

                        // initial image paths

                                detailImage = contentWrapper.get("DETAIL_IMAGE_URL");

                                largeImage = contentWrapper.get("LARGE_IMAGE_URL");

 

                                if (detailImage == null || detailImage.length() == 0) {

                                    detailImage = virtualDetailImage;

                                }

                                if (largeImage == null || largeImage.length() == 0) {

                                    largeImage = virtualLargeImage;

                                }

 

                                // full image URLs

                                detailImageUrl = null;

                                largeImageUrl = null;

 

                                // append the content prefix

                                if (detailImage != null && detailImage.length() > 0) {

                                    detailImageUrl = ContentUrlTag.getContentPrefix(request) + detailImage;

                                    // base64 encode the image url for a little protection

                                    detailImageUrl = URLEncoder.encode(Base64.base64Encode(detailImageUrl), "UTF-8");

                                }

                                if (largeImage != null && largeImage.length() > 0) {

                                    largeImageUrl = ContentUrlTag.getContentPrefix(request) + largeImage;

                                }

 

                                jsBuf.append("document.forms[\"addform\"].elements[\"FT" + topLevelName + "\"].options[" + (counter+1) + "] = new Option(\"" + key + "\",\"" + opt + "\");");

                                jsBuf.append("DET[" + counter + "] = \"" + detailImageUrl +"\";");

                                jsBuf.append("IMG[" + counter + "] = \"" + largeImageUrl +"\";");

 

                                if (firstDetailImage == null || firstDetailImage.length() == 0) {

                                    firstDetailImage = detailImageUrl;

                                }

                                if (firstLargeImage == null || firstLargeImage.length() == 0) {

                                    firstLargeImage = largeImage;

                                }

                                counter++;

                            }

                            context.put("firstDetailImage", firstDetailImage);

                            context.put("firstLargeImage", firstLargeImage);

                        }

                        jsBuf.append("}");

 
_______________________________________________
Dev mailing list
[hidden email]
http://lists.ofbiz.org/mailman/listinfo/dev