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

dauxcl2d 于 2023-02-01 发布在其他

关注(0)|答案(2)|浏览(245)

我想用我从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：{学号：1，vor名称：“玛丽”，本名：“鲍尔”，街道：“”，请：“”，...}长度：1 原型：数组（0）
我尝试了在stackoverflow找到的所有不同选项（例如，使用jQuery），但它们也不适用于表单。

JSON

来源：https://stackoverflow.com/questions/75276737/how-to-populate-json-data-into-html-form-with-fetch

2条答案

按热度按时间

2guxujil1#

你可以试试这个代码：

<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;
  });

赞(0）回复(0）举报 2023-02-01

ndh0cuux2#

我知道了，它可以用这个代码工作：

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;
        });
      }
    });
  });

我刚刚删除了let = exampleData，并将exampleData.forEach（（itemData）替换为data. forEach...
非常感谢，我已经花了这么多时间在这上面，所以我真的很感谢你的帮助！

赞(0）回复(0）举报 2023-02-01

我来回答

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

2条答案

相关问题

热门标签

最新问答