用javascript从json中获取数据不止一个数据
Posted
技术标签:
【中文标题】用javascript从json中获取数据不止一个数据【英文标题】：Get data from json with javascript more than one data 【发布时间】：2021-10-05 11:22:45 【问题描述】：我有一个关于使用 javascript 从 json 获取数据的问题。我有一个表格。我想用来自 json 的数据填写这个表格。现在我可以用这段代码做到这一点。
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<form>
<input id="name_1" name="name" placeholder="Name" type="text" value="" />
<input id="surname_1" name="surname" placeholder="Surname" type="text" value="" />
<select id="gender_1" name="gender">
<option disabled="disabled" selected="selected">Gender</option>
<option value="F">Female</option>
<option value="M">Male</option>
<option value="N">None.</option>
</select>
<input id="day_1" maxlength="2" name="day" placeholder="GG" type="text" value="" />
<select id="month_1" name="month">
<option disabled="disabled" selected="selected">Month</option>
<option value="1">Jan</option
><option value="2">Feb</option>
<option value="3">Mar</option>
<option value="4">Apr</option>
<option value="5">May</option>
<option value="6">Jun</option>
<option value="7">Jul</option>
<option value="8">Aug</option>
<option value="9">Sep</option>
<option value="10">Oct</option>
<option value="11">Nov</option
><option value="12">Dec</option>
</select>
<input id="year_1" maxlength="4" name="year" placeholder="YYYY" type="text" value="" />
</form>
<script>
var data =
"name": "Jack",
"surname": "Rynold",
"gender": "M",
"day": 12,
"month": 3,
"year": 1995,
;
for (key in data)
if (data.hasOwnProperty(key))
$('input[name=' + key + ']').val(data[key]);
$('select[name=' + key + ']').val(data[key]);
</script>
</body>
</html>
现在输出是这样的
但是如果数据不止一个，我也想像这样打开一个新的表格。
数据：
var data = [
"name": "Jack",
"surname": "Rynold",
"gender": "M",
"day": 12,
"month": 3,
"year": 1995,
,
"name": "John",
"surname": "Rynold",
"gender": "M",
"day": 30,
"month": 4,
"year": 1996,
];
预期输出：
我该怎么做？
感谢您的回答。
【问题讨论】：
【参考方案1】：使用 jQuery 有很多方法可以做到这一点。将一个类添加到您的 <form class="client form"> 迭代您的数组，并在每次迭代时克隆初始表单并将克隆的实例附加到客户端对象属性中的 DOM 映射到正确的字段，就像您已经在做的那样。
https://api.jquery.com/clone/
【讨论】：
以上是关于用javascript从json中获取数据不止一个数据的主要内容，如果未能解决你的问题，请参考以下文章
我想将 JSON 数据传递给与 web 视图相关的 javascript 函数。但我无法从 Javascript 函数中获取响应数据