How to move values ​from one array to another in angular 11

Question

I want to move a value on one array to another. Here's the first array

"availableMember": [
      {
        "id": 18,
        "userDivisionId": 1,
        "userDivisionCode": "1",
        "userDivisionName": "DEPT. MARKETING & LOGISTIK"
      },
      {
        "id": 26,
        "userDivisionId": 333,
        "userDivisionCode": "2.3.21.02",
        "userDivisionName": "YGY PO"
      },
      {
        "id": 27,
        "userDivisionId": 335,
        "userDivisionCode": "2.3.21.02.04",
        "userDivisionName": "YGY MO"
      },
    ]

and I want to move, for example object with userDivisionId is 333, to the second array.

"selectedMember": []

I already try using .splice(), but sometimes its work and sometimes it doesn't. Any idea how to do this? Please help me. Thank you.

Answer 1

Array.find() is the most appropriate method. It takes a function as a parameter and will return the first element in which the function returns true. If you want to find all occurrences, just substitute find with filter. Use Array.push() to add an element to an array, or Array.concat() to concatenate two arrays.

 availableMember = [
    {
      id: 18,
      userDivisionId: 1,
      userDivisionCode: '1',
      userDivisionName: 'DEPT. MARKETING & LOGISTIK',
    },
    {
      id: 26,
      userDivisionId: 333,
      userDivisionCode: '2.3.21.02',
      userDivisionName: 'YGY PO',
    },
    {
      id: 27,
      userDivisionId: 335,
      userDivisionCode: '2.3.21.02.04',
      userDivisionName: 'YGY MO',
    },
  ];
  selectedMember: any[] = [];

Adding a single element

  ngOnInit(): void {
    const selected = this.availableMember.find(
      (el) => el.userDivisionId === 333
    );
    this.selectedMember.push(selected);
  }

Adding multiple elements

  ngOnInit(): void {
    const selected = this.availableMember.filter(
      (el) => el.userDivisionId === 333 || el.userDivisionId === 335
    );
    this.selectedMember = this.selectedMember.concat(selected);
  }

Answer 2

You can try something like below, where you can pass division id into the function call like selectMember(333). This is a dynamic approach. You can also transform or overload this function with more inputs to match userDivisionName or id in future

const selectMember = (divisionId) => {
  availableMember.map(function(x) {
    if (x.userDivisionId === divisionId)
      selectedMember.push(x)
  })
}

or variation of the above function

const selectMemberV2= (divisionId) => {
  selectedMember = availableMember.filter(x => x.userDivisionId === divisionId);
}

---

Working Code

let availableMember = [{
    "id": 18,
    "userDivisionId": 1,
    "userDivisionCode": "1",
    "userDivisionName": "DEPT. MARKETING & LOGISTIK"
  },
  {
    "id": 26,
    "userDivisionId": 333,
    "userDivisionCode": "2.3.21.02",
    "userDivisionName": "YGY PO"
  },
  {
    "id": 27,
    "userDivisionId": 335,
    "userDivisionCode": "2.3.21.02.04",
    "userDivisionName": "YGY MO"
  },
];


selectedMember = [];
// function to select member with different input
const selectMember = (divisionId) => {
  availableMember.map(function(x) {
    if (x.userDivisionId === divisionId)
      selectedMember.push(x)
  })
}

// call 
selectMember(333);

//log
console.log(selectedMember)