const statuses = [ "PENDING_SITE", "CONSENTED", "PENDING_CALL", "PENDING_SATTUS" ]; const disqualificationReasons = [ { value: "personal", message: "Personal" }, { value: "no_nearby_site", message: "No nearby site" }, { value: "ineligible", message: "Ineligible" }, { value: "no_contact", message: " No contact" }, { value: "screen_failure", message: "Screen failure" }, { value: "other", message: "Other" } ]; const result = disqualificationReasons.map(({ message, value }) => ({ message })); console.log(result.map((x) => x.message)); document.getElementById("app").innerHTML = ` <div>${result.map((x) => x.message)}</div> <div>${result .filter((value) => value === "screen_failure") .map((x) => x.message)}</div> `; <!DOCTYPE html> <html> <head> <title>Parcel Sandbox</title> <meta charset="UTF-8" /> </head> <body> <div id="app"></div> <script src="src/index.js"> </script> </body> </html>El problema que tengo es que
Tengo una serie de obj, el llamado Motivos de disqualificationReasons y los estoy asignando en realidad a un menú desplegable.
Necesito completar el menú desplegable con los mensajes, pero necesito filtrar cuando tengo estados como 'CONSENTED' y 'PENDING_SITE'
Cuando tengo los estados 'CONSENTED' O 'PENDING_SITE', veo todos los mensajes en el menú.
Cuando no estoy en 'CONSENTIDO' o 'PENDING_SITE', no se debe mostrar el mensaje 'Error de pantalla'.
Traté de usar el filtro pero me quedé atascado en cómo hacerlo.
Prácticamente en función de cuál es el estado de arriba, tengo que mostrar todos los mensajes o identificar el mensaje 'Falla de pantalla'.
Creo que tu problema está aquí:
const result = disqualificationReasons.map(({ message, value }) => ({ message }));los corchetes no son necesarios. Así que podrías escribir:
const result = disqualificationReasons.map(({ message, value }) => message); Luego, en su html, el filtro es incorrecto porque está filtrando usando el value pero las razones de disqualificationReasons tienen message . Entonces el filtro debe ser:
<div>${result .filter((value) => value !== "Screen failure") .map((x) => x)}</div>Aquí su codesandbox modificado.
No estoy seguro de si esto es lo que estás buscando, pero echa un vistazo:
const status = ""; const result = disqualificationReasons.filter((e) => { if (status === "CONSENTED" || status === "PENDING_SITE") return true; return e.value !== "screen_failure"; }); En el status establecerá uno de sus estados. Si el estado se establece en CONSENTED o PENDING_SITE , se mostrará el mensaje screen_failure en la matriz. Si no es uno de esos dos estados, screen_failure se eliminará de la matriz.