Retrieving selected values from an ngx dropdown list

Question

Retrieving selected values from an ngx dropdown list

I am having trouble implementing ngx dropdown list in this way:

<ngx-dropdown-list [items]="categoryItems" id="categoriesofdata" [multiSelection]="true"
                        [placeHolder]="'Select categories'"></ngx-dropdown-list>

After selecting items, I want to retrieve only the selected values like so:

get selectedCategories() {
    const items = this.categoryItems.filter((item: any) => item.selected);
    return items.length ? JSON.stringify(items.map(item => ({
      value: item.value
    }))) : '';

  }

The output currently displays as:

[{"value":"Surname"},{"value":"Address"}]

However, I would like to retrieve just 'Surname' instead of 'value' and 'Surname'.

[0].value

What is the best approach to achieve this?

Should I use a for loop or is there a better option available?

javascript angular typescript

Answer 1

Answer №1

It seems like you're very close to the solution, but perhaps a bit too complex with your current approach. Instead of creating a new structure in your map function, it should simply return the value you are interested in.

get selectedCategories() {
  const items = this.categoryItems.filter((item: any) => item.selected);
  return items.length ? JSON.stringify(items.map(item => item.value)) : '';
}

Edit:

On a personal note, I would suggest refactoring the code to something like this:

get selectedCategories() {
  if (!this.categoryItems.length) {
    return '';
  }

  const surnames = this.categoryItems
    .filter(item => item.selected)
    .map(item => item.value);
  return JSON.stringify(surnames);
}

I prefer to exit a function early if further processing is unnecessary. Additionally, I like assigning the result of chained filter and map functions to a named variable like 'surnames' to make the intention of the code clear and keep array logic together.

This is just my personal preference and style. Your code was almost there in terms of functionality.

Answer 2

It seems like you're very close to the solution, but perhaps a bit too complex with your current approach. Instead of creating a new structure in your map function, it should simply return the value you are interested in.

get selectedCategories() {
  const items = this.categoryItems.filter((item: any) => item.selected);
  return items.length ? JSON.stringify(items.map(item => item.value)) : '';
}

Edit:

On a personal note, I would suggest refactoring the code to something like this:

get selectedCategories() {
  if (!this.categoryItems.length) {
    return '';
  }

  const surnames = this.categoryItems
    .filter(item => item.selected)
    .map(item => item.value);
  return JSON.stringify(surnames);
}

I prefer to exit a function early if further processing is unnecessary. Additionally, I like assigning the result of chained filter and map functions to a named variable like 'surnames' to make the intention of the code clear and keep array logic together.

This is just my personal preference and style. Your code was almost there in terms of functionality.

Retrieving selected values from an ngx dropdown list

Answer №1

Similar questions

What do I do when I get a "findByIdAndUpdate is not a function" error from my controller after requiring the model

Dynamically sending data to child components in Vue.js

Ways to switch the positions of two characters in a text box

Sending the most recent result to each dynamically created div

Tips for avoiding multiple reference paths in Angular TypeScript: - Simplify your imports

using javascript to change a link's state with a click action

Transform seconds into an ISO 8601 duration using JavaScript

What is the method to retrieve values passed to the next() function in Node.js?

"Trouble with Heroku: JavaScript script failing to load with 404

Ways to showcase angular scope data within a placeholder while avoiding the use of angular expressions

Is it possible for :hover to function with td elements in jQuery?

JavaScript Page Search - Error in Finding Single Result

Get the name of the array using JavaScript

What could be causing this excessive lag?

Tips for Integrating a Facebook Shop Page into Your Website

Grab and drop into place

Combining data from an object within an array in JavaScript

Instead of using an ID in javaScript, opt for $(this) instead

I am unable to achieve negative X degree rotation of the image while using mousemove to rotate it

Press the body to update state in React and close the dropdown