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>The issue I'm having is that
I have an array of obj the one called disqualificationReasons and I'm mapping those in reality to a dropdown menu.
I need to populate the dropdown with the messages but I need to filter when I have statuses as 'CONSENTED' and 'PENDING_SITE'
When I have 'CONSENTED' OR 'PENDING_SITE' statuses I see all the messages in the menu.
When I'm not in 'CONSENTED' or 'PENDING_SITE' the message 'Screen failure' should not be displayed.
I tried to use the filter but got stuck on how to do it.
Pratically based of what the status is on above I have to show all messages or ide the one message 'Screen failure'.
I think your problem is here:
const result = disqualificationReasons.map(({ message, value }) => ({
message
}));
brackets are not necessary. So you could write:
const result = disqualificationReasons.map(({ message, value }) => message);
Then in your html the filter is wrong because you are filtering using value but disqualificationReasons has message. So the filter should be:
<div>${result
.filter((value) => value !== "Screen failure")
.map((x) => x)}</div>
Here your codesandbox modified.
I'm not sure if this is what you're looking for, but take a look:
const status = "";
const result = disqualificationReasons.filter((e) => {
if (status === "CONSENTED" || status === "PENDING_SITE") return true;
return e.value !== "screen_failure";
});
In the status you will set one of your statuses. If the status is set to CONSENTED or PENDING_SITE then the screen_failure message will be shown in the array. If it's not one of those two statuses then the screen_failure will be removed from the array.