Tengo un archivo JSON que estará lleno de información del usuario y en la página de administración que muestra todos los usuarios quiero una columna para "¿Es administrador?" con una lista desplegable de sí/no. ¿Puedo hacer que la lista muestre Sí y tenga No como la otra opción para los administradores y muestre No y tenga Sí como la otra opción para los no administradores? La página es JavaScript vainilla ya que todavía soy bastante nuevo en esto.
Una muestra de los datos del usuario es
{"id":"2", "username":"david", "password":"1234", "user_id":"127", "date":"2022-02-14 23:45:37", "is_admin":"1"}Tan simple como es, el JavaScript para mostrar la página es
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; } }captura de pantalla agregada para referencia
Los administradores sí/no deberían ser
<select> <option>Yes</option> <option>No</option> </select>Y los no administradores deberían ser
<select> <option>No</option> <option>Yes</option> </option>También me acabo de dar cuenta de que los nombres de las columnas son incorrectos, pero la columna Admin es correcta, además de no ser un menú desplegable.
Esta es una forma de hacerlo:
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> La función de devolución de llamada en la llamada .map() genera una cadena HTML para un elemento <tr> con todo su contenido para cada uno de los objetos incluidos en la matriz de data . Estas cadenas HTML individuales son los elementos de la matriz devuelta y se join("") -juntas al final para volver a convertirse en una única cadena HTML.