Most simple way to generate HTML based on JSON and vice versa?

Question

JavaScript

There is a hierarchical structure of fields (`select,input`), with the ability for the user to combine and nest them into each other. In other words, a tree of logical expressions, where each node-value is several forms of input.
The tree is built by the user and since it needs to be saved into a certain structure and restored back (build HTML) from it. It was advised to use JSON + some JS library to avoid code changes in case of minor form changes.
The HTML looks like this (extra button elements removed for example):

<div class="conditions-group logical-or">

    <div class="conditions">

        <div class="conditions-group logical-and">

            <div class="conditions">
                
                <div class="condition row">
                    <div class="metric">
                        <select class="form-control"></select>
                    </div>
                    <div class="operator">
                        <select class="form-control "></select>
                    </div>
                    <div class="value">
                        <input value="" class="form-control">
                    </div>
                </div>

                <div class="condition row">
                    <div class="metric">
                        <select class="form-control"></select>
                    </div>
                    <div class="operator">
                        <select class="form-control "></select>
                    </div>
                    <div class="value">
                        <input value="" class="form-control">
                    </div>
                </div>

            </div>

            <div class="condition row">
                <div class="metric">
                    <select class="form-control"></select>
                </div>
                <div class="operator">
                    <select class="form-control "></select>
                </div>
                <div class="value">
                    <input value="" class="form-control">
                </div>
            </div>

        </div>
    </div>
</div>

Please help: What can you advise for the implementation of this type of task? If a JS library, which one?
Thank you very much in advance.

Answer 1

https://github.com/kevinchappell/formBuilder