the best way to bring JSON and UI together

Hallo Jens,

Bitte verstehe mich nicht falsch. Aber die ganze Herangehensweise ist doch nur eine „Krücke“. Vielleicht verstehe ich auch einfach dein Gesamtkonzept nicht wirklich und ich weiß nicht, was du wirklich benötigst.

Es stimmt, Objekte - nennen wir sie einmal mehrstufige Arrays - sind mit Javascript nicht besonders gut zu händeln. Allerdings kann man sie meiner Meinung nach doch recht simpel „auflösen“ und so mit den Elementen des Objektes ganz gut umgehen.

Ich glaube nicht, dass es wirklich notwendig ist, alles umständlich in einen String umzuwandeln. Dann mühseliges Hin- und Herspringen zwischen Funktionen mit diversen verschachtelten IndexOf- und If-Else Ersetzen-Vorgängen, For-Schleifen und anschließendem mehrfaches Rückumwandeln in multiple Arrays …

Mein Vorschlag:

Lies die Werte direkt aus - oder speichere die keys and values in einem Array zwischen. Versuche z.B. einmal den nachfolgenden Weg:

var JO = { JSname: "Plus",JSversion: "1.0",uiProject: "Mustermann", uiPrintFormat: "ai", uiCuttingFormat: "pdf", uiPrintSaveFolder: "~/Desktop/", uiPrintSave: true, uiCuttingSave: true, uiPageSize: "A4", uiGridSheetWidth: 210.0, uiGridSheetHeight: 297.0, uiPageMarginLeft: 7.0, uiPageMarginRight: 7.0, uiPageMarginTop: 7.0, uiPageMarginBottom: 7.0, uiShowPageMargin: true, }; // the JSON object
var aUI = new Array (); // the values for the UI
var aJSONkeys = new Array (); // the JSON keys
var key;

// entweder direktes Auslesen
alert("value 1 direkt: " + JO.JSname);
alert("value 4 direkt: " + JO.uiPrintFormat);

// oder zwischenspeichern in "deinen" Arrays
fJSONtoUI(JO);

alert("length of aUI array: " + aUI.length + "\nfirst key: " + aJSONkeys[0] + "\nfirst value: " + aUI[0]);
alert("length of aJSONkeys array: " + aJSONkeys.length + "\nfourth key: " + aJSONkeys[3] + "\nfourth value: " + aUI[3]);

function fJSONtoUI(pJSON) {
    for (key in pJSON) {
        aJSONkeys.push(key);
        aUI.push(pJSON[key]);
    }
    return aUI, aJSONkeys;
}

oder als Variante „dein Weg“

(über String-Konverierung-->Mehrfach-Ersetzen-->Array-Zwischenkonvertierung-->FinaleArrays)  nur etwas aufgeräumt und optimiert:

var JO = { JSname: "Plus",JSversion: "1.0",uiProject: "Mustermann", uiPrintFormat: "ai", uiCuttingFormat: "pdf", uiPrintSaveFolder: "~/Desktop/", uiPrintSave: true, uiCuttingSave: true, uiPageSize: "A4", uiGridSheetWidth: 210.0, uiGridSheetHeight: 297.0, uiPageMarginLeft: 7.0, uiPageMarginRight: 7.0, uiPageMarginTop: 7.0, uiPageMarginBottom: 7.0, uiShowPageMargin: true, }; // the JSON object
var aUI = new Array (); // the values for the UI
var aJSONkeys = new Array (); // the JSON keys

var aArray = JO.toSource().toString().replace (/[(){}\"]/g, "").split(/, ?/);
for (x=0; x < aArray.length; x++) {
    var aRow = aArray[x].split(":");
    aJSONkeys.push(aRow[0]);
    aUI.push(aRow[1]);
}

alert("length of array: " + aUI.length + "\nfirst value: " + aUI[0]);
alert("aUI:\n" + aUI);
alert("aJSONkeys:\n" + aJSONkeys);

Hallo Jens,

mit JSON kann ich dir leider nicht weiterhelfen.

Deshalb nur eine kleine Randnotiz

Es gibt sicherlich Dutzende unterschiedlicher Wege, um ans Ziel zu kommen. Könnte es sein, dass z.B. deine fJsonString () function durch eine etwas abgewandelte Schreibweise direkter ausgeführt wird?

function fJsonString(pObject) { // ObjectToString 
	//alert( pObject.toSource().toString().replace (/[()]/g, ""));
	return pObject.toSource().toString().replace (/[()]/g, "");
}

You can only do something like this:

Create an object literal or class which can be used to help describe each one of the 50 variables.
var JsonObjTemplate = {

  name : {

    name : "name", // helps to locate this object if it ends up being inside an array & not this template for some reason at run-time.
    type : "string", // This is a fundamental necessary property which helps with what sort of UI control to produce.
    defaultValue : "ABCD", // a property that helps future operations do something unique.
  },
  age : {
    name : "age",
    type : "number",
    defaultValue : 0,
  },

};
Create a method or a bunch of methods which can operate on the data template object and show the variables as some sort of UI controls.
One way to do this is to have not a lot of separate sections but to have one listbox which can hold an unlimited number of items and then another area such as group or panel which has orientation = "stack" and different UI controls can be hidden or shown based on the selection in the listbox.
Another way is to maybe not have a listbox and have any arbitrary UI you please.
Here's an example of a method that can output a control based on the data template.
If some code isn't working due to a need for a polyfill such as JSON object, please obtain any polyfills you might need:
function getUIControl (typeDescObj, parent) {
  var type = typeDescObj.type;

  var name = typeDescObj.name;

  var control = null;

  return control;
}

Then you'd make a window, run the variables template through a loop and add all the controls you would need.
You may want to create a method for getting all data from the UI into a JSON object and also for setting the data to an existing UI window.
It is possible to add your own custom prototypes to ScriptUI widgets such as 'edittext'.
EditText.prototype.setValue = function (val) {

  this.text = val;

};
With such prototypes you can add additional arguments, or you can add additional properties to instantiated EditText objects which can be used by the prototype getValue/setValue methods to do more than just `this.text = ""`.
For example, assuming a second argument of "typeDescObj" is passed in. Before setting a text value, this prototype method could now check for the 'type' property or any other properties and do such manipulations as math rounding or replacing unwanted characters with an underscore '_'.
The advantage of using a prototype is that throughout the code you can always rely on your EditText(s) and StaticText(s) being able to get and set values without having to paste a method everywhere. However, it doesn't have to be a prototype, it can be just a regular function that you do paste everywhere and there's nothing wrong with that.
It can be a little bit of work, but if you do this then for all future time you'll be able to make verbose UIs for many differents data objects - as long as your code supports those properties. So if you are doing a new script that wants a new data type, all you do is add the new block in your code library and now it's enabled in all of your scripts!

Here is an example of my own code which uses these techniques. I make a settings menu out of this which doesn't use any listbox or dynamic display area per row, it just adds sections to one dialog box. The objective for this was never to have more than 10 or so settings variables. If it were to increase, I would make it into a listbox for sure. One can also go all the way with this 'architecture' by creating nested controls which are also dynamic like so. Your control object isn't an EditText, it's a Group or Panel which has its own "setValue" and "getValue", and those can wrap the same structure meaning it can have nested EditTexts and StaticTexts and other Group or Panel on and on.