我想将json数组(从后端获取)转换为动态html表单：
{
"journeys": [
{
"origin": "New York"
"destination": "San Francisco"
"distance": 4670
},
{
//repeat the above N times
}
]
}
虽然为每个数组元素生成3个输入会很容易，但我如何在编辑后实际将它们POST返回后端？
我的意思是，通常每个<input>元素都有一个name属性，该属性在获取/发布请求中用作查询参数。
但是，我怎么能在这里发布修改后的json等价物呢？
<form>
<div class="mb-3">
<label for="origin1" class="form-label">Origin</label>
<input type="text" class="form-control" id="origin1">
</div>
<div class="mb-3">
<label for="destination1" class="form-label">Destination</label>
<input type="text" class="form-control" id="destination1">
</div>
<div class="mb-3 form-check">
<label for="distance1" class="form-label">Distance</label>
<input type="text" class="form-control" id="distance1">
</div>
<!-- repeat the above N times, with id="originN" / "destinationN" / "distanceN" -->
<button type="submit" class="btn btn-primary">Submit</button>
</form>
您可以使用new FormData()和循环formData.entries()来构造所需的数据。
const data = {
journeys: [
{
origin: "New York",
destination: "San Francisco",
distance: 4670,
},
{
origin: "Australia",
destination: "Sydney",
distance: 2300,
},
],
};
//create HTML
for (const { origin, destination, distance } of data.journeys) {
const form = document.createElement("form");
form.innerHTML = `
<div class="mb-3">
<label class="form-label">Origin</label>
<input type="text" class="form-control" name='origin' value='${origin}'/>
</div>
<div class="mb-3">
<label class="form-label">Destination</label>
<input type="text" class="form-control" name='destination' value='${destination}'/>
</div>
<div class="mb-3 form-check">
<label class="form-label">Distance</label>
<input type="text" class="form-control" name='distance' value='${distance}'/>
</div>
`;
document.querySelector("section").appendChild(form);
}
//add addEventListener to send data to backend
document.querySelector("#btn1").addEventListener("click", () => {
const forms = document.querySelectorAll("form");
const updatedData = { journeys: [] };
forms.forEach(form => {
const formData = new FormData(form);
const journey = {};
for (const [key, value] of formData.entries()) {
if (key === "distance") {
journey[key] = Number(value);
} else {
journey[key] = value;
}
}
updatedData.journeys.push(journey);
});
console.log(updatedData);
});<section></section>
<button id="btn1" type="button" class="btn btn-primary">Submit</button>我已经更新了@ikhvjs答案中的一些代码，以便在渲染时使用N元素增加字段id。感谢您的回答@ikhvjs
是的，我保留了第一个元素，所以如果你不想，你可以删除HTML代码。
const data = {
journeys: [
{
origin: "New York",
destination: "San Francisco",
distance: 4670,
},
{
origin: "Australia",
destination: "Sydney",
distance: 2300,
},
{
origin: "Australia 1",
destination: "Sydney 1",
distance: 2301,
},
{
origin: "Australia 2",
destination: "Sydney 2",
distance: 2302,
},
],
};
var increment = 2;
for (const { origin, destination, distance } of data.journeys) {
const form = document.createElement("form");
form.innerHTML = `<hr/>
<div class="mb-3">
<label for="origin'${increment}'" class="form-label">Origin</label>
<input type="text" class="form-control" name='origin' id="origin'${increment}'" value='${origin}'/>
</div>
<div class="mb-3">
<label for="destination'${increment}'" class="form-label">Destination</label>
<input type="text" class="form-control" name='destination' id="destination'${increment}'" value='${destination}'/>
</div>
<div class="mb-3 form-check">
<label for="distance'${increment}'" class="form-label">Distance</label>
<input type="text" class="form-control" name='distance' id="distance'${increment}'" value='${distance}'/>
</div>
`;
document.querySelector("jsonresponse").appendChild(form);
increment++;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Title of the document</title>
</head>
<body>
<form id="my_test_form">
<div class="mb-3">
<label for="origin1" class="form-label">Origin</label>
<input type="text" name="origin[]" class="form-control" id="origin1">
</div>
<div class="mb-3">
<label for="destination1" class="form-label">Destination</label>
<input type="text" name="destination[]" class="form-control" id="destination1">
</div>
<div class="mb-3 form-check">
<label for="distance1" class="form-label">Distance</label>
<input type="text" name="distance[]" class="form-control" id="distance1">
</div>
<jsonresponse></jsonresponse>
<!-- repeat the above N times, with id="originN" / "destinationN" / "distanceN" -->
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</body>
</html>