将JSON动态加载到数据列表中(vanillaJS)

Question

过去几天我一直在研究W3C和SO(这是我发现的最接近我的问题(；静态"；JSON转换为动态创建的数据列表。

我正在努力实现的更多细节——我正在努力创建一个表单，将记录添加到数据库中；默认表单允许添加一条记录，但有一个按钮可以动态添加另一组空字段，以便一次提交多条记录。一旦填写完所有表单，就会将其发送到PHP进行处理。我在前端使用bootstrap(不过为了可读性，我会尝试清理代码(。

1. 第一次加载页面，将JSON保存为"；HTML变量"；。请注意，该页面已经有一个数据列表
2. 如果用户单击按钮添加另一组字段，则会显示这些字段(包括一个额外的数据列表(
3. 目标：这个新创建的数据列表应该用保存在第1点的HTML变量中的JSON填充

两个问题：

1. 这可行吗？与中一样，即使我更改了DOM，HTML变量是否也具有持久作用域
2. 如果是，我在下面的代码中做错了什么

<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>?do=addnewstructure" enctype="multipart/form-data">
<input list="datalistOptions" id="datalisttype1" name="deftype_ent[]" placeholder="Type to search..." onFocus="populate_datalist(types_json);">
<datalist id="datalistOptions">
<option value="first">First persistent option</option>
</datalist>
</div>
<div>
<label for="value_ent">Name</label>
<input type="text" name="defvalue_ent[]" id="value_ent">
</div>
<div>
<label for="relevance_ent">Relevance</label>
<select id="relevance_ent" name="relevance_ent">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
<script>
var types_json = document.createElement("list_of_types");
var dataList = document.getElementById("datalisttype1");

var types_json = [<?php
echo json_encode($results_json); // This is coming from backend, it is valid JSON
?>];
// Loop over the JSON array.
function populate_datalist(which_dl)
{
which_dl.forEach(function(item) {
var option = document.createElement('option');

option.value = item.type_id;
option.text = item.name;
dataList.appendChild(option);
});
}
</script>
<button type="submit">Add</button>
</form>

我知道这可能是一个棘手的问题，因为我刚开始学习js，到目前为止只学习be语言。谢谢你的帮助！：(

Answer 1

对于将来偶然发现这段代码的人来说，我让它工作了，以前它不工作的原因有很多。

简而言之：

• 函数appendChild没有将选项附加到数据列表，而是附加到输入
• JSON虽然有效，但没有单引号
• 有些变量没有初始化，在调用函数时失败
• 函数是在数据列表之后声明的(例如，在声明之前调用(
• 其他一些

TLDR；不要依赖上面的代码，即使是作为灵感：(