如何使用fetch()将JSON数据填充至HTML表单？

我希望将从API获取的JSON数据填充到HTML表单的输入字段中。我可以通过以下代码将数据显示在表格中，但无法使其适配表单。我尝试用类似表单选择器替代表格相关选择器，但没有效果。有人知道如何修改这段代码使其适配表单吗？

原表格渲染代码：

const url = "/api/contacts/" + localStorage.getItem("paraID");
fetch(url).then((res) => {
        res.json().then((data) => {
          console.log(data);
          if (data.length > 0) {
            var temp = "";
            data.forEach((itemData) => {
              temp += "<tr>";
              temp += "<td>" + itemData.studentID + "</td>";
              temp += "<td>" + itemData.nachname + "</td>";
              temp += "<td>" + itemData.studium + "</td>";
              temp += "<td>" + itemData.semester + "</td>";
              temp += "<td>" + itemData.deaktiviert + "</td></tr>";
            });
            document.getElementById("myTable").innerHTML = temp;
          }
        });
      });

fetch函数可以正常工作，控制台输出的JSON数据格式如下：

[{…}]
0: {studentID: 1, vorname: 'Marie', nachname: 'Bauer', strasse: '', plz: '', …}
length: 1
[[Prototype]]: Array(0)

我试过在stackoverflow上找到的各种方法（比如使用jQuery），但都无法适配表单。

你的数据是长度为1的数组，直接取第一个元素data[0]即可，无需用forEach循环。接下来只需要通过表单输入框的id或name属性，将对应字段的值赋值给输入框的value（复选框用checked）属性即可。

方法一：原生JS直接赋值（推荐） #

假设你的HTML表单结构如下：

<form id="studentForm">
  <input type="text" id="studentID" name="studentID">
  <input type="text" id="vorname" name="vorname">
  <input type="text" id="nachname" name="nachname">
  <input type="text" id="studium" name="studium">
  <input type="text" id="semester" name="semester">
  <input type="checkbox" id="deaktiviert" name="deaktiviert">
</form>

修改后的fetch代码：

const url = "/api/contacts/" + localStorage.getItem("paraID");
fetch(url)
  .then(res => res.json())
  .then(data => {
    console.log(data);
    if (data.length > 0) {
      const item = data[0];
      // 给普通输入框赋值
      document.getElementById('studentID').value = item.studentID;
      document.getElementById('vorname').value = item.vorname;
      document.getElementById('nachname').value = item.nachname;
      document.getElementById('studium').value = item.studium;
      document.getElementById('semester').value = item.semester;
      // 复选框需设置checked属性，而非value
      document.getElementById('deaktiviert').checked = item.deaktiviert;
    }
  })
  .catch(err => console.error('数据获取失败:', err));

方法二：批量赋值（适合字段较多的场景） #

如果表单输入框的id和JSON数据的键名完全一致，可以用循环批量处理，减少重复代码：

const url = "/api/contacts/" + localStorage.getItem("paraID");
fetch(url)
  .then(res => res.json())
  .then(data => {
    console.log(data);
    if (data.length > 0) {
      const item = data[0];
      // 遍历所有字段，匹配对应输入框
      Object.keys(item).forEach(key => {
        const element = document.getElementById(key);
        if (element) {
          // 区分复选框和普通输入框的赋值逻辑
          if (element.type === 'checkbox') {
            element.checked = item[key];
          } else {
            element.value = item[key];
          }
        }
      });
    }
  })
  .catch(err => console.error('数据获取失败:', err));

注意事项 #

• 确保表单输入框的id与JSON数据的键名完全匹配（比如studentID对应id="studentID"）
• 布尔类型字段（如deaktiviert）如果对应复选框，要设置checked属性而非value
• 新增catch捕获请求异常，方便排查问题

内容的提问来源于stack exchange，提问作者M. B.