Unable to add chosen elements to array - Angular material mat select allowing multiple selections

Question

Unable to add chosen elements to array - Angular material mat select allowing multiple selections

Can anyone assist me in figuring out what I am doing wrong when attempting to push data to an empty array?

I am trying to only add selected values (i.e. those with checked as true), but I can't seem to get inside the loop

This is the current condition:

const vals = [];
    if (e && e.source.selected.length > 0) {
      console.log('selected values', e.source.selected);
      const sel = e.source.selected;
      sel.forEach((e: any) => {
        if (sel._selected) {
          vals.push(e);
          console.log('EE', e);
        }
      });
    }

Check out the demo on StackBlitz

Expected output:

selectedList : [
{ id: '0' }, { id: '1' }, { id: '2' }
]

Purpose:

Attempting to bind the same data in edit mode within a form

javascript angular typescript ecmascript-6 angular-material

Answer 1

Answer №1

Forget about using your function altogether. Just delete it and use this instead:

console.log(e.source.value);

This line of code already contains all the selected values!

Whenever you update, the array will automatically reflect only the selected values.

If you want to change it to look like this:

expected:

selectedList : [ { id: '0' }, { id: '1' }, { id: '2' } ]

just use this piece of code:

let selectedList = e.source.value.map((elem: number) => ({ id: elem }));
console.log(selectedList);

Answer 2

Forget about using your function altogether. Just delete it and use this instead:

console.log(e.source.value);

This line of code already contains all the selected values!

Whenever you update, the array will automatically reflect only the selected values.

If you want to change it to look like this:

expected:

selectedList : [ { id: '0' }, { id: '1' }, { id: '2' } ]

just use this piece of code:

let selectedList = e.source.value.map((elem: number) => ({ id: elem }));
console.log(selectedList);

Answer 3

Answer №2

Give this a try!

onSelectingToppings(e: any) {

const toppings:any[] = [];
if (e && e.source.selected.length > 0) {
  // console.log('selected values', e.source.selected);
  const selectedToppings = e.source.selected;
  selectedToppings.forEach((item: any) => {
    if (item._selected) {
      toppings.push(item);
    }
  });
  console.log(toppings.length)
}
}

Answer 4

Give this a try!

onSelectingToppings(e: any) {

const toppings:any[] = [];
if (e && e.source.selected.length > 0) {
  // console.log('selected values', e.source.selected);
  const selectedToppings = e.source.selected;
  selectedToppings.forEach((item: any) => {
    if (item._selected) {
      toppings.push(item);
    }
  });
  console.log(toppings.length)
}
}

Answer 5

Answer №3

Seems like there may be an issue with your if statement, the revised version should look like this:

const values = [];
if (element && element.source.choices.length > 0) {
  console.log('selected choices', element.source.selected);
  const selection = element.source.selected;
  selection.forEach((item: any) => {
    if (item.selected) {
      values.push({"id": item.value});
      console.log('Selected ID', {"id": item.value});
    }
  });
}

If you are experimenting with something different, consider adding a console log before your if statement within the loop to troubleshoot the issue.

Answer 6

Seems like there may be an issue with your if statement, the revised version should look like this:

const values = [];
if (element && element.source.choices.length > 0) {
  console.log('selected choices', element.source.selected);
  const selection = element.source.selected;
  selection.forEach((item: any) => {
    if (item.selected) {
      values.push({"id": item.value});
      console.log('Selected ID', {"id": item.value});
    }
  });
}

If you are experimenting with something different, consider adding a console log before your if statement within the loop to troubleshoot the issue.

Answer 7

Answer №4

To prevent errors when no value is selected or the page is initialized, optional chaining has been added to the code. Now, sel holds the array of selected values without causing any issues. Check out the updated code below:

    if (e && e.source?.selected?.length > 0) {
      console.log('selected values', e);
      const sel = e.source.selected;
      sel?.value?.forEach((e: any) => {
          vals.push(e);
          console.log('EE', e);
    
      });
    }

Answer 8

To prevent errors when no value is selected or the page is initialized, optional chaining has been added to the code. Now, sel holds the array of selected values without causing any issues. Check out the updated code below:

    if (e && e.source?.selected?.length > 0) {
      console.log('selected values', e);
      const sel = e.source.selected;
      sel?.value?.forEach((e: any) => {
          vals.push(e);
          console.log('EE', e);
    
      });
    }

Unable to add chosen elements to array - Angular material mat select allowing multiple selections

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Nodejs asynchronous tasks are not functioning correctly with SetInterval

Cypress, encountering issues with If/Else or Switch Case implementations

Incorporating a stationary navigation bar alongside a parallax scrolling layout

Avoid losing any entered form information when leaving the page

Having Trouble with Angular2: Nesting a Child Component?

Retaining original input value even when validation is applied with input type="number"

Maintain the spacing of an element when utilizing *ngFor

Center the span in CSS by setting its position to absolute

refresh Laravel 5.1 webpage content seamlessly without page reloading

refreshing the webpage with information from an API request

The code compilation of Typescript in a Dockerfile is not functioning as expected due to the error "Name 'process' cannot be found."

Retrieve the identification number from the code snippet containing the "append(<tr><td="ID">..." template

Making a POST request using axios in a MERNStack application

Having trouble storing data accurately in local storage using React

What factors influence the speed of an Ajax request?

Initiating a conversation using a greeting in the Javascript bot framework

Utilizing variable index to access nested objects

Tips for adding spacing when the sidebar collapses and expands in a React application

The ElementRef was modified following the activation of a click event

unable to retrieve the city name through geographical location information