我可以根据JSON文件数据制作一个动态的是/否下拉列表吗

Question

我有一个JSON文件，它将充满用户信息，并在显示所有用户的管理页面中显示我想要的"；是管理员吗"带有"是/否"下拉列表。我可以让列表显示"是"，并将"否"作为管理员的另一个选项，并显示"否"，将"是"作为非管理员的另另一个选择吗？这个页面是普通的JavaScript，因为我对此还很陌生。

用户数据的样本是

{"id":"2",
"username":"david",
"password":"1234",
"user_id":"127",
"date":"2022-02-14 23:45:37",
"is_admin":"1"}

尽管很简单，但显示页面的JavaScript是

function loadData(data) {

let table = document.querySelector("#user-list");

for (let i = 0; i < data.length; i++) {

let row = `<tr>
<td>${data[i].user_id} </td>
<td>${data[i].username}  </td>
<td>${data[i].date} </td>
<td>${data[i].is_admin == 1 ? "Yes" : "No"}  </td>
</tr>
`;

table.innerHTML += row;

}
}

添加了供参考的屏幕截图

管理员是/否应该是

<select>
<option>Yes</option>
<option>No</option>
</select>

非管理员应该是

<select>
<option>No</option>
<option>Yes</option>
</option>

还刚刚意识到列名是错误的，但Admin列是正确的，而不是下拉列表。

Answer 1

这是一种方法：

const data=[{"id":"1",
"username":"Harry",
"password":"5678",
"user_id":"112",
"date":"2022-02-11 13:45:37",
"is_admin":"0"},
{"id":"2",
"username":"david",
"password":"1234",
"user_id":"127",
"date":"2022-02-04 11:05:47",
"is_admin":"1"},
{"id":"3",
"username":"Molly",
"password":"9834",
"user_id":"187",
"date":"2022-01-21 08:15:00",
"is_admin":"0"}];
function loadData(data) {
document.querySelector("#user-list").innerHTML=data.map(d=>`<tr>
<td>${d.user_id}</td>
<td>${d.username}  </td>
<td>${d.date} </td>
<td><select><option value="1"${d.is_admin==1?" selected":""}>yes</option><option value="0"${d.is_admin==0?" selected":""}>no</option></select></td></tr>`).join("");
}
loadData(data);

<table>
<thead><tr><th>id</th><th>name</th><th>date</th><th>admin</th></tr>
<tbody id="user-list"></tbody></table>

.map()调用中的回调函数为<tr>元素构建一个HTML字符串，其中包含data-数组中包含的每个对象的所有内容。这些单独的HTML字符串是返回数组的元素，它们在最后被join("")组合在一起，再次成为单个HTML字符串。