Dynamic form from JSON in ONE step

@sibertMay 12.2021

**My goal**
I have a vision of storing “forms” as JSON data in a database and generate the form “on-the-fly”. My intention is to reuse the same template regardless of form.

**The challenge**
I have managed to do some stuff, but my enclosed solution expects <textarea> to come at the end.
The challenge is to make it possible to put the <textarea> in the same order as the JSON. So I want to use ONE JSON data. Not 2 JSON data.

**Questions**
My attempt is to create this both to learn and to use in real life. But is there any existing javascript libraries that does the same thing? Are there any cons doing this way?

https://jsfiddle.net/goh97wm6/

to post a comment

JavaScript

11 Comments(s) _↴

@SempervivumMay 12.2021 — #How would you rate this:

``<i>
 </i>        const data = {
 general:
 [{
 label: "ID",
 type: "text",
 id: "id",
 value: "1"
 } ,
 {
 label: "Date",
 type: "date",
 id: "date",
 value: "2021-01-01"
 } ,
 {
 label: "Subject",
 type: "text",
 id: "name",
 value: "Paris"
 }],
 textarea:
 [{
 label: "Desc",
 id: "desc",
 value: "Lorem ipsum...",
 placeholder: "Ask your question..."
 }]
 }<i>
 </i>``

>is there any existing javascript libraries that does the same thing?

Yes, there are several libraries for templating, e. g. vue.js

@sibertauthorMay 12.2021 — #> @Sempervivum#1631541 How would you rate this:

Thank you. I think it is in the right direction. My solution contains 2 levels of iterating. But I think this solution need 3 levels of iterating. Any hint how to do this?

But the JSON data does not validate "Error: Parse error on line 1: textarea: [{ "

> @Sempervivum#1631541 Yes, there are several libraries for templating, e. g. vue.js

At the moment I do not want to add any framework upon Go. So is there any "vanilla" form library out there?

@SempervivumMay 12.2021 — #>At the moment I do not want to add any framework upon Go. So is there any "vanilla" form library out there?

Unfortunately vue.js is the only templating framework I've used till now.

>But the JSON data does not validate "Error: Parse error on line 1: textarea: [{ "

That's true, Javascript accepts it but JSON requires double quote around the keys like this:

```
 {
 "general":
 [{
 "label": "ID",
 "type": "text",

@SempervivumMay 12.2021 — #Reduce levels by one:

``<i>
 </i>       const data = [
 { 
 type: "general",
 label: "ID",
 type: "text",
 id: "id",
 value: "1"
 } ,
 {
 type: "general",
 label: "Date",
 type: "date",
 id: "date",
 value: "2021-01-01"
 } ,
 {
 type: "general",
 label: "Subject",
 type: "text",
 id: "name",
 value: "Paris"
 },
 {
 type: "textarea",
 label: "Desc",
 id: "desc",
 value: "Lorem ipsum...",
 placeholder: "Ask your question..."
 }
 ]<i>
 </i> ``

@sibertauthorMay 12.2021 — #> @Sempervivum#1631550 Reduce levels by one:

The problem is that the information about <textarea> and <input> is available only in level 2

How do I access this information at level 1?

``<i>
 </i>for (var row in data) {
 //Level 1 type &lt;textarea&gt; &lt;input&gt; not accessible at this level.
 for (var key in textarea[row]) {
 //Level 2 create child elements ("type", "placeholders" etc)
 }
 }<i>
 </i>``

@SempervivumMay 12.2021 — #I had this in my mind:

```
 for (let row in data) {
 if (row.type == 'general') {
 // create general element
 } else {
 // type = textarea
 // create textarea
 }
 }

@sibertauthorMay 12.2021 — #> @Sempervivum#1631554 I had this in my mind:

But how do I get type information at level 1?

https://jsfiddle.net/2cb0t5uz/

@SempervivumMay 12.2021 — #You had already defined `type</C>, therefore we have to choose a different name, e. g. <C>tag

</C>:
 <CODE>

<i>
 </i> const data = [{
 tag: "input", 
 label: "ID",
 type: "text",
 id: "id",
 value: "1"
 },
 {
 tag: "input", 
 label: "Date",
 type: "date",
 id: "date",
 value: "2021-01-01"
 },
 {
 tag: "textarea",
 // data for textarea here
 }<i>
 </i>

``
Would this be OK?

@sibertauthorMay 12.2021 — #> @Sempervivum#1631556 You had already defined type, therefore we have to choose a different name, e. g. tag:

This was one part of the problem, but is there a way read the child.key from level 1?

https://jsfiddle.net/vwxfhd3m/1/

@SempervivumMay 12.2021 — #You can access the second level the same way as DaveyErwin recommended in your other posting:

``<i>
 </i>        for (var row in data) {
 console.log("LEVEL 1: " + data[row].tag)
 for (var key in data[row]) {
 console.log("level 2: " + data[row][key])
 }
 }<i>
 </i>`</CODE>
 Or the way I would prefer:
 <CODE>`<i>
 </i>        data.forEach((item, idx) =&gt; {
 for (let key in item) {
 console.log("idx: " + idx + " key:" + key + " value:" + item[key]);
 }
 });<i>
 </i>``

@sibertauthorMay 13.2021 — #I have now tested and found your suggestion is working perfect. I can move around the <textarea> and place it where I want in the JSON data. Thank you!

https://jsfiddle.net/65cze0w3/

Together with fetching JSON data:

https://jsfiddle.net/6s4gqco1/2/

Also in #JavaScript _↴

How to view dynamic HTML code produced by Javascript in IE6?when a newbie meets a file ...I am looking for contact form from a free templete

Success!

Help @sibert spread the word by sharing this article on Twitter...

Tweet This

Dynamic form from JSON in ONE step

11 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Dynamic form from JSON in ONE step

11 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

11 Comments(s) _↴

Also in #JavaScript _↴