Using JavaScript to retrieve comma-separated values depending on a specific condition

Hey there, I am encountering a problem with filtering out values from an array of objects. Essentially, I have an array of objects

const arr = [
    {
        "id": null,
        "name": null,
        "role": "Authorized Redistributor (AR)",
        "checked": false,
        "checkBoxPatched": true
    },
    {
        "id": null,
        "name": null,
        "role": "System Of Record (SOR)",
        "checked": true,
        "checkBoxPatched": true
    },
    {
        "id": null,
        "name": null,
        "role": "Authorized Redistributor (AR)",
        "checked": true,
        "checkBoxPatched": true
    }
]

arr.map(res => res.checked ? res.role : "").join(', ')
// ", System Of Record (SOR), Authorized Redistributor (AR)"

I am looking to retrieve comma-separated role values if checked is true. So based on the above object, the output should be 

System Of Record (SOR), Authorized Redistributor (AR)
.

javascriptarraystypescriptobjectecmascript-6

Answer №1

const data = [
    {
        "id": null,
        "name": null,
        "role": "Authorized Redistributor (AR)",
        "checked": false,
        "checkBoxPatched": true
    },
    {
        "id": null,
        "name": null,
        "role": "System Of Record (SOR)",
        "checked": true,
        "checkBoxPatched": true
    },
    {
        "id": null,
        "name": null,
        "role": "Authorized Redistributor (AR)",
        "checked": true,
        "checkBoxPatched": true
    }
]

const roleFilter = data.map(item => item.checked ? item.role : '')
  .filter((role) => role.length !== 0).join(', ');
console.log(roleFilter)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to conceal elements that do not have any subsequent elements with a specific class?

Here is the HTML code I have, and I am looking to use jQuery to hide all lsHeader elements that do not have any subsequent elements with the class 'contact'. <div id="B" class="lsHeader">B</div> <div id="contact_1" class="contac ...

javascriptjqueryhtml

Increase the value of k by using an array insertion loop

Is there a way to increment the value of the variable $k every time a record is inserted in the loop? I need to insert an array with the required values based on the inserted records. Below is a snippet of the code, any help would be appreciated. $k = 0; ...

phparrayscodeigniter

JavaScript method overloading involves defining multiple functions with the same name

In my JavaScript code, I have implemented method overloading using the following approach: function somefunction() { //1st function } function somefunction(a) { //2nd function } function somefunction(a,b) { //3rd function } somefunction(); // ...

javascriptjqueryoverloading

The issue with AngularJS Routing is that it fails to refresh the menu items when the URL and views are being

My current project involves implementing token-based authentication using the MEAN stack. The goal of my application is to display different menu items based on whether a user is logged in or not. When there is no token present, the menu should show option ...

javascriptangularjs

What steps can be taken to retrieve error.data from RTK Query while utilizing typescript?

When I log error to the console, this is what I see: { status: 401, data: "Invalid password" } If I attempt to log error.data, an error occurs: The "data" property does not exist in the "FetchBaseQueryError|SerializedErr ...

reactjstypescriptrtk-query

What is the approach for capturing system or website sound using JavaScript?

After creating an online drumkit and guitar player, I am now looking to enhance my website by adding a feature that allows users to record their sessions and download them. Since I am new to web development and familiar only with HTML, CSS, JavaScript, and ...

javascripthtmljquerycssaudio-recording

When utilizing destructuring in React.js with TypeScript, incorrect prop values are not being alerted as expected

I recently started using TypeScript and I have been enjoying it so far. However, I came across an issue today that I couldn't solve. Imagine a scenario where a parent component A passes a function that expects a numeric value to the child component B ...

typescriptreact-typescript

A: TypeScript Error TS7006: Parameter implicitly has an 'any' type

TS7006: The parameter 'port' is implicitly assigned an 'any' type. constructor(port) { TS7006: The parameter 'message' is implicitly assigned an 'any' type. Emit(message) { I'm confused because all the other r ...

node.jstypescript

What is the best way to connect data so that when a user clicks on a specific card, it appears on a popup card

When a user clicks on any card containing data retrieved from a backend API GET method, that data should be displayed in a pop-up card. In my situation, I have two components: DisplayNotes.vue and UpdateNotes.vue. Whenever a user clicks on a displayed card ...

javascripthtmlcssvue.jssass

Stripping CSS prefixes upon file initialization

When developing my application, I have a process in place where I load CSS files on the back-end using Express.JS and then transmit them to the front-end. However, before sending the CSS code to the front-end, I need to: Identify the user's browser; ...

javascriptcssexpressreplace

Python Selenium fails to retrieve table data

https://i.sstatic.net/3YLMW.png I am encountering an issue where the print statement at the end of my code returns NONE. I aim to store values at every 6th spot in each row, which is functioning correctly. However, when I attempt to print(self.mystr) at th ...

javascriptpythonpython-3.xseleniumselenium-webdriver

Contrast two items with identical keys arranged differently

let firstObject = { key1: value1, key2: value2 } let secondObject = { key2: value2, key1: value1 } What is the best way to compare the two objects above and determine if they are equal? ...

javascriptnode.js

Exploring the capabilities of the Scripting.FileSystemObject within the Microsoft Edge browser

With the removal of ActiveXObject in Microsoft Edge, what is the alternative method to use FileSystemObject in this browser? I am currently working on developing a Microsoft Edge plugin that captures the HTML code of a web page and saves it as a .txt fil ...

javascriptjsonmicrosoft-edgemicrosoft-edge-extension

What are the steps to modify data within the root component?

I am currently working on a Vue project with vue-cli and routes. In my App.vue file, the template structure is as follows: <template> <div id="app"> {{Main}} <router-view></router-view> </div> </template&g ...

javascripthtmlvuejs2vue.js

Enhancing the current Node.js, Express, MongoDB, and Socket.io stack with the integration of AngularJS

After spending some time developing a web app using Node.js, Express, MongoDB, Mongoose and Socket.io, I've successfully released version one. Looking ahead to version two, my plan is to revamp the UI completely and switch to a front-end framework lik ...

javascriptnode.jsmongodbangularjsmongoose

Ensure that when adjusting the height of a div, the content is always pushed down without affecting the overall layout of the page

My webpage contains a div element positioned in the middle of the content, with its height being adjustable through JavaScript code. I am seeking a way to manage the scrolling behavior when the height of the div changes. Specifically, I want the content t ...

javascripthtmlcss

The type 'string | AddressInfo' does not include a 'port' property and does not have a string index signature

When running in { port }, I encountered the following error: Type 'string | AddressInfo' has no property 'port' and no string index signature. How can I resolve this issue? Code: import * as express from 'express' const app ...

typescript

When the window is fully loaded, JavaScript executes

Can someone help me set up this script to start running when the page loads? I want the vat field to automatically show up if the company name has been entered. Thank you! //--></script> <script type="text/javascript>//-- $('.colorbox ...

javascriptjquery

Attempting to transfer various variables from several windows using AJAX

Is it possible to pass multiple variables from two different windows into the same PHP script? If not, what would be the best approach to take? Thank you. verifyemail.html <script type = "text/javascript" src = "js/js_functions.js"></script> ...

javascriptphpjqueryhtmlajax

Stuck with the same icon even after a successful AJAX call

I am currently working on implementing a 'add to my list' function in my web app. The goal is to change the color of an icon when a user clicks on it, after sending the necessary data to the server. Despite successfully sending the data to the s ...

javascripthtmljqueryajaxflask