Generate a dialog based on a set of key/value pairs

Question

I am working on an already existing UI and I need to do some modifications. The UI uses freemarker for templating.

There is a section in the HTML page which is :

<td>
    <#if authRole?? && authRole == 'ADMIN' >
    <#if leaf.value??>
    <a href="#" data-toggle="modal" class="href-select" data-target="#addPropertyModal" itemprop="${leaf.strValue?html}" >${leaf.name}</a> 
    <#else>
    <a href="#" data-toggle="modal" class="href-select" data-target="#addPropertyModal" itemprop="" >${leaf.name}</a> 
    </#if>
    <#else>
    ${leaf.name}
    </#if>
</td>

Here clicking on the leaf.name value opens a dialog box which has a Name and Value textbox. The modal for the dialog is this :

<div class="modal fade" id="addPropertyModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">Add Property</h4>
            </div>
            <div class="modal-body">
                <div class="input-group input-group-lg">
                    <span class="input-group-addon">Name</span>
                    <input type="text" id="newProperty"  name="newProperty" class="form-control" placeholder="name">
                    </div>
                    <br/>
                    <div class="input-group input-group-lg">
                        <span class="input-group-addon">Value</span>
                        <textarea id="newValue" name="newValue" class="form-control" placeholder="value" style="resize:vertical;" ></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <input type="submit" id="savePropertyBtn" name="action" value="Save Property" class="btn btn-primary"/>
                    <input type="submit" id="updatePropertyBtn" name="action" value="Update Property" class="btn btn-primary"/>
                </div>
            </div>
        </div>
    </div>
</div>

This is the js part:

$(".href-select").click(function() {
                var propName = $(this).text();
                var propVal = $(this).attr('itemprop');
                $("#newProperty").attr('readonly', true);
                $("#newProperty").val(propName);
                $("#newValue").val(propVal);

                $("#savePropertyBtn").hide();
                $("#updatePropertyBtn").show();
            });

Now my problem is I want to return a map instead of a String in leaf.strValue . And in the dialog bos , instead of this

Name  : [    ]
Value : [    ]

I want this:

Name : [    ]
Key1 : [Value]
Key2 : [Value]

The Name is the node name and the Value is the node value. But in my use case , the node Value consists of many values which I have decided to show as a list in the UI. So Key1 is the first key in the node Value (which is a map) and [Value] is the value of the corresponding key.

Please help me on this.

EDIT: I am ok with making the node value as a JSON string too. So in that case , the keys and values should be the key value pairs in the JSON. So I tried this :

var json = JSON.parse(propVal, 'UTF-8');

and was able to get the JSON object. But now I want the dialog box to show the key and value pairs through iteration ( because the key value pairs are not fixed ).

Answer 1

Well, you need, instead of the <div><span>Value</span><-input_field-/></div> block, to generate, this way or another, a series of such blocks according to your keys/values. And probably handle them in the JS in the similar "array" manner.

Otherwise, I cannot say anything since you told nothing about the form and shape of this mysterious key/value data set.