如何将获取的数据放在各自的输入字段中（输入字段是动态创建的）答案

【问题标题】：how to place fetched data in their respective input fields (input fields are created dynamically)如何将获取的数据放在各自的输入字段中（输入字段是动态创建的）
【发布时间】：2019-07-28 01:41:22
【问题描述】：

提供一些背景故事：

我正在为我的内容管理系统制作一个编辑按钮，但我现在遇到了几个问题。我正在完成其他人他的部分（他构建了 CMS，我被分配到他的项目，基本上必须完成他开始的工作）所以有些部分我无法编辑或更改。

问题：

您可以在CMS中动态创建输入字段，然后将数据插入Mysqli。现在我正在成功获取数据，但偶然发现以下问题：输入字段是这样创建的：

<input type="text" name="example[]" id="example[]"> //note the square brackets

我无法为这些 ID 分配递增的计数器，因此我可以将获取的数据分配给输入字段。我正在尝试遍历我的所有数据集，然后将它获取的第一个数据插入到第一个输入字段中，将第二个数据插入到第二个输入字段中，依此类推。

我能够动态创建相同数量的输入字段，但主要问题是将所有数据添加到单个输入字段。我不断在所有输入字段中获取最后获取的数据。

我尝试了什么以及如何尝试在输入字段 1 中插入 data1 等等：

我知道这很糟糕，我知道它不起作用以及为什么它不起作用，但我会把它扔给你一个想法。

for (var i = 0; i < response.length; i++) {
    console.log(i);
        $("#example\\[" + "\\]").each(function() { //already tried incrementing this part by using i as a counter, but it doesn't recognize the id when I use i as a counter.
            $("#example\\[" + "\\]").val(response[i].exampleType);
        });
}

我想要达到的目标：

我正在尝试遍历我的数据库行（成功）
通过 JSON 获取（成功）
根据获取的数据量动态创建输入字段（成功）
在第一个输入字段中插入来自数据库的 data1，在第二个输入字段中插入 data2，依此类推（这是出错的地方，我不能或不知道如何使用方括号将输入字段递增到在输入字段中插入我获取的数据）。

示例：

您已通过 ajax 获取 JSON 格式的数据，您的响应参数如下所示：

response = JSON.parse(response);

您的数据库中有 2 行：row1（来自 JSON.parse[0]）和 row1（来自 JSON.parse[1]）

您已经动态创建了 2 个输入字段（因为您有 response[0].example 和 response[1].example），但两个输入字段如下所示：

<input type="text" name="example[]" id="example[]">

这意味着您已经动态创建了以下内容：

<input type="text" name="example[]" id="example[]">
<input type="text" name="example[]" id="example[]">

现在您必须在第一个输入字段中插入 row1（来自 response[0].example），将另一个 row1（来自 response[1].example）插入第二个。

这样的事情怎么可能实现？

提前感谢您的时间和精力

【问题讨论】：

如果我理解正确，您想用从数据库中获取的数据填充您的输入吗？
是的，非常正确！但是，正如您所见，所有输入都有方括号表示法（以这种方式插入数据库），我现在不知道如何获取我的所有数据，并用它填充我的输入字段。
当你循环你的 json 响应时，你不能简单地使用当前响应元素设置每个输入的 value 属性吗？
但这就是问题所在，我如何针对每个输入个体？由于它们都具有相同的名称和 ID 等。我不能或不知道如何给它一个 ID 递增，否则我的编译器无法定位该特定 ID，因为它有一个递增的计数器跨度>
你用 Javascript 解析你的 json，所以同时使用它来生成你的输入：所以你要么创建你的帖子中显示的输入（带括号，所以数据以数组的形式发送）或自定义的符合您的需求？

标签： javascript php jquery ajax content-management-system

【解决方案1】：

your_json_array.forEach( function(obj) { //loop over your json array

    var input = document.createElement("input"); //create an input

    input.setAttribute("name", "yourname"); //custom it
    input.setAttribute("value", obj.value); //custom it
    //etc...

    your_div.appendChild(input); //appends it where you want
});

Obj 是您的响应的一个元素，并且是它的属性之一

【讨论】：