I have a JSON file that will be full of user information and in the admin page displaying all of the users I want a column for "Is Admin?" with a yes/no dropdown list. Can I make the list show Yes and have No as the other for admins and show No and have Yes as the other option for non-admins? The page is vanilla JavaScript as I'm still pretty new at this.
A sample of the user data is
{"id":"2",
"username":"david",
"password":"1234",
"user_id":"127",
"date":"2022-02-14 23:45:37",
"is_admin":"1"}
As simple as it is, the JavaScript to display the page is
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;
}
}
added screenshot for reference
The Admins yes/no should be
<select>
<option>Yes</option>
<option>No</option>
</select>
And the non admins should be
<select>
<option>No</option>
<option>Yes</option>
</option>
Also just realized the column names are wrong, but the Admin column is correct, other than not being a dropdown.
This is one way of doing it:
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>The callback function in the .map() call builds an HTML string for a <tr> element with all its content for each of the objects contained in the data-array. These individual HTML strings are the elements of the returned array and they are join("")-ed together at the end to become a single HTML string again.