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

Question

我想用我从 API 获得的 JSON 数据填充 HTML 表单输入字段。我可以使用以下代码在表中显示数据，但我无法使其与表单一起使用。 我试图用类似 or 而不是 and 来处理表单，但它不起作用。 有谁知道我是否可以转换此代码以使用表单？

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 function 有效，我可以在控制台中看到正确的 JSON 数据。 它看起来像这样：[{…}] 0: {studentID: 1, vorname: 'Marie', nachname: 'Bauer', strasse: '', plz: '', …} length: 1 [[Prototype]]:数组(0)

我尝试了我在 stackoverflow 上找到的所有不同选项（例如使用 jQuery），但它们也不适用于表单。

Answer 1

你可以试试这个代码：

   <form id="myForm">
        <input name="studentID" />
        <input name="nachname" />
        <input name="studium" />
        <input name="semester" />
        <input name="deaktiviert" />
   </form>

   let exampleData = [{
    studentID: 'value',
    nachname: 'value',
    studium: 'value',
    semester: 'value',
    deaktiviert: 'value',
  }]

  const myForm = document.getElementById('myForm');

  exampleData.forEach((itemData) => {
    myForm['studentID'].value = itemData.studentID;
    myForm['nachname'].value = itemData.nachname;
    myForm['studium'].value = itemData.studium;
    myForm['semester'].value = itemData.semester;
    myForm['deaktiviert'].value = itemData.deaktiviert;
  });

Answer 2

这就是我让它工作的方式：

1. 删除let = exampleData
2. 将 exampleData.forEach((itemData exampleData.forEach((itemData) …替换为data.forEach((itemData) …

fetch(url).then((res) => {
  res.json().then((data) => {
    console.log(data);
    if (data.length > 0) {
      const myForm = document.getElementById("myForm");
      data.forEach((itemData) => {
        myForm["studentID"].value = itemData.studentID;
        myForm["nachname"].value = itemData.nachname;
        myForm["studium"].value = itemData.studium;
        myForm["semester"].value = itemData.semester;
        myForm["deaktiviert"].value = itemData.deaktiviert;
      });
    }
  });
});