[英]Mapping over an array of objects to generate React components based on the key value pairs
[英]Generate a dialog based on a set of key/value pairs
我正在处理现有的UI,我需要做一些修改。 UI使用freemarker进行模板化。
HTML页面中有一个部分是:
<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>
在此处单击leaf.name
值将打开一个对话框,其中包含名称和值文本框。 对话框的模式是这样的:
<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">×</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>
这是js部分:
$(".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();
});
现在我的问题是我想在leaf.strValue
返回一个地图而不是一个字符串。 而在对话框中,而不是这个
Name : [ ]
Value : [ ]
我要这个:
Name : [ ]
Key1 : [Value]
Key2 : [Value]
Name
是节点名称, Value
是节点值。 但在我的用例中,节点Value包含许多值,我决定将其显示为UI中的列表。 因此Key1
是节点Value中的第一个键(它是一个映射), [Value]
是相应键的值。
请帮帮我。
编辑:我也可以将节点值作为JSON字符串。 因此,在这种情况下,键和值应该是JSON中的键值对。 所以我尝试了这个:
var json = JSON.parse(propVal, 'UTF-8');
并能够获得JSON对象。 但现在我希望对话框通过迭代显示键和值对(因为键值对不是固定的)。
那么,您需要,而不是<div><span>Value</span><-input_field-/></div>
块,以这种方式生成一系列这样的块,根据您的键/值。 并且可能以类似的“数组”方式在JS中处理它们。
否则,我不能说什么,因为你没有说出这个神秘的键/值数据集的形式和形状。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.