Databases
StackOverflow2013
Postsdbo
POChange JavaScript object values with auto-generated HTML form
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POChange JavaScript object values with auto-generated HTML form
    text
    copied!<p>I have got a 'big' JavaScript object that looks somewhat like this: </p> <pre><code>var userConfig = { active: true, subElement: { someProp: 156, otherProp: 'yaye' }, foo: ['bar', 'see', 'no'] // etc } </code></pre> <p>What I'm looking for is some sort of framework that I pass the variable (or a part of the variable) to and that reads all properties and creates a form where these can be configured. So a checkbox would be created for a boolean, a textbox for a string etc...</p> <p>Anyone knows about such a library?</p> <p><strong>Update</strong>: At the moment settings are changed by opening the JS and editting the variables manually (The JS is a locally stored greasemonkey script). Pretty much anything beats that really.<br> I'm not interested in writing (alot of) code to do two way binding, creating all the UI widgets and having a clean seperation of concerns (MVVM, MVP, ...) which is what Knockout/Backbone/... does (judging from the tutorials).</p> <p><strong>Instead</strong>:</p> <pre><code>var userConfigUpdater = { active: { description: "Activates or deactivates feature X", editType: "boolean"}, subElement: { description: "subElement", editType: "tabularItem", someProp: {description: "foo", editType: "text"}, // more } } createHtmlWidgets(userConfig, userConfigUpdater); </code></pre> <p>Now the user can edit the form elements and then we have something like: <code>$("#okButton").click(function() {userConfig = getUpdatedValues();});</code></p> <p>Granted, it doesn't look very nice, but it would get the job done quite fast/easily. I'm guessing there is not yet some public framework that does something like this?</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload