[英]How to populate JSON data into HTML form with fetch()?
I want to populate HTML form input fields with JSON data I get from my API. I can display the data in a table with the following code, but I cannot make it work with a form.我想用我从 API 获得的 JSON 数据填充 HTML 表单输入字段。我可以使用以下代码在表中显示数据,但我无法使其与表单一起使用。 I tried to address the form with something like or instead of and, but it doesn't work.我试图用类似 or 而不是 and 来处理表单,但它不起作用。 Does anyone know if I can transform this code to work with a form?有谁知道我是否可以转换此代码以使用表单?
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;
}
});
});
The fetch function works, I can see the correct JSON data in the console. fetch function 有效,我可以在控制台中看到正确的 JSON 数据。 It looks like this: [{…}] 0: {studentID: 1, vorname: 'Marie', nachname: 'Bauer', strasse: '', plz: '', …} length: 1 [[Prototype]]: Array(0)它看起来像这样:[{…}] 0: {studentID: 1, vorname: 'Marie', nachname: 'Bauer', strasse: '', plz: '', …} length: 1 [[Prototype]]:数组(0)
I tried all the different options I found at stackoverflow (eg with jQuery), but they also don't work with a form.我尝试了我在 stackoverflow 上找到的所有不同选项(例如使用 jQuery),但它们也不适用于表单。
you can try this code:你可以试试这个代码:
<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;
});
This is how I got it to work:这就是我让它工作的方式:
let = exampleData
删除let = exampleData
exampleData.forEach((itemData) …
with data.forEach((itemData) …
将 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;
});
}
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.