使用JSON数据填充单选按钮和JavaScript对象属性

Question

我有一些表单元素，其名称和id对应于一些自定义JavaScript对象的名称和JSON数据的一些键。

如何填充表单，JSON提供的表单名称中的对象是未知的，唯一的链接是表单元素，对象和JSON密钥的通用名称？ JSON可能包含其他非表单和对象相关的数据。

在下面的示例中，难点在于弄清楚如何获取其名称以及随后的相应单选按钮。是否有更有效的非迭代方法来做到这一点？

我使用eval（）来引用目标。除了不是最好的方法之外，如果JSON键评估为false，即没有具有特定JSON键名的对象名，我将收到错误。由于表单元素和JavaScript对象完全相互映射，我在使用eval（）方法之前使用了DOM元素检查，有没有其他方法来检查具有特定名称的对象是否存在？

＆＃13;

＆＃13;

// JavaScript objects declaration
var nonform = {objName: "nonform"};
var lorem = {objName: "lorem"};
var ipsum = {objName: "ipsum"};
var dolor = {objName: "dolor"};
var sit = {objName: "sit"};
var amet = {objName: "amet"};
var consectetur = {objName: "consectetur"};
	
var json={
"nonform": "some nonform data",
"lorem": "lorem input text",
"ipsum":"ipsum input text",
"dolor": 1,
"sit":"sit input text",
"amet":2,
"consectetur": "sed"	
}

function displayObj (){
var str = "";
str += JSON.stringify(nonform) + "<br>";
str += JSON.stringify(lorem) + "<br>";
str += JSON.stringify(ipsum) + "<br>";
str += JSON.stringify(dolor) + "<br>";
str += JSON.stringify(sit) + "<br>";
str += JSON.stringify(amet) + "<br>";
str += JSON.stringify(consectetur);
document.getElementById("objects").innerHTML = str;
}

function jsonToForm(json) { //	populates form elements and objects with JSON data
	for (var x in json) {	// JSON iteration
		var id = x; // in my original code x has to be processed to match form and object names
		var element = document.getElementById(id);
		if (element) { // if JSON key corresponds to a non radio button (unique id) form element
			element.value = json[x];	// updates form values
			eval(id).val = json[x];	// updates object values
		} else if (document.getElementsByName(id)[0]) {	//	for radio buttons the name attribute is used as JSON key won't match separate radio button id's. NodeList[0] used instead of NodeList as some non radio button DOM elements matched the JSON key in my original code.
			var radios = document.getElementsByName(id);
			for (var i = 0; i < radios.length; i++) {	//	radio button iteration
				if (radios[i].value == json[x]) {
					radios[i].checked=true;
					eval(id).val = json[x];
					break;
				}
			}
		}
	}
displayObj();
}

window.onload = displayObj();

＆＃13;

input, select {
	margin: 5px;
  }

＆＃13;

<form>
	<input type="text" id="lorem" name="lorem">
	<input type="text" id="ipsum" name="ipsum">
	<label>
		<input type="radio" id="dolor_0" name="dolor" value="0">
		-0-</label>
	<label>
		<input type="radio" id="dolor_1" name="dolor" value="1">
		-1-</label>
</form>
<hr>
<form>
	<input type="text" id="sit" name="sit">
	<label>
		<input type="radio" id="amet_0" name="amet" value="0">
		-0-</label>
	<label>
		<input type="radio" id="amet_1" name="amet" value="1">
		-1-</label>
	<label>
		<input type="radio" id="amet_2" name="amet" value="2">
		-2-</label>
	<select id="consectetur" name="consectetur">
		<option value="adipiscing">adipiscing</option>
		<option value="elit">elit</option>
		<option value="sed">sed</option>
		<option value="eiusmod ">eiusmod </option>
	</select>
</form>
<hr>
<div id="objects"> 
</div>
<hr>
<input type="button" value="JSON to form and obj" onclick="jsonToForm(json)">

＆＃13;

＆＃13;

＆＃13;