Move the selected objects from and to position inside the array by given index, angular

Question

i have array of objects and the two select box with some values in from and to select box(index), where i am trying to move the object "from"(index) selected position "to"(index) selected position and vice versa in the given array without changing the index or position values of other objects. The logic which i am using is working if i select the value from select box less then "to" select box its somewhat working but otherwise it wont.

Below is the code and logic which i am trying hard to move the value but its not working.

import {
  Component,
  OnInit
} from "@angular/core";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit {
  name = "Angular";
  data = [{
      id: "fmgbwe45",
      age: 24,
      gender: "male"
    },
    {
      id: "kjregh23",
      age: 27,
      gender: "female"
    },
    {
      id: "kjfdhg87",
      age: 30,
      gender: "male"
    },
    {
      id: "lsdjfk43",
      age: 10,
      gender: "female"
    },
    {
      id: "lsdjfk43",
      age: 15,
      gender: "female"
    },
    {
      id: "lsdjfk43",
      age: 14,
      gender: "female"
    },
    {
      id: "lsdjfk43",
      age: 50,
      gender: "female"
    },
    {
      id: "lsdjfk43",
      age: 19,
      gender: "female"
    }
  ];
  from: "";
  to: "";

  ngOnInit() {}

  changeSelect(event, value) {
    if (value === "from") this.from = event.target.value;
    else this.to = event.target.value;
    // console.log(this.to, "====", this.from);
    this.data.forEach((item, i) => {
      if (this.to && this.from) {
        let f = this.data.splice(parseInt(this.from), 1)[0];
        var d = this.data.splice(parseInt(this.to), 0, f);
        console.log(this.data, f);
      } else {}
    });
  }
}

<h2>pretty-print:</h2>
<form action="/action_page.php">

  <label for="cars">Choose a from index:</label>
  <select name="cars" (change)="changeSelect($event,'from')">
    <option *ngFor="let data1 of data; let i = index" [value]="i+1">{{data1.age}}+ {{i+1}}</option>

  </select>
  ==
  <label for="cars">Choose a To index:</label>

  <select name="cars" (change)="changeSelect($event,'to')">
    <option *ngFor="let data1 of data; let i = index" [value]="i+1">{{data1.age}}+ {{i+1}}</option>

  </select>
  <div *ngFor="let data1 of data; let i = index">
    <pre>{{data1 | json}} + {{i+1}} </pre>
  </div>
</form>

Please help me to resolve or correct me if i am going wrong in selecting index values.

below is the example in which i want the data to be displayed:

i am selecting index val "from" = 6, "to" = 3 below is the object i require

{
  "id": "fmgbwe45",
  "age": 24,
  "gender": "male"
} + 1 
{
  "id": "kjregh23",
  "age": 27,
  "gender": "female"
} + 2 
{
  "id": "lsdjfk43",
  "age": 14,
  "gender": "female"
} + 3 // this is moved from 6rd position to 3th position or index, other in same position
{
  "id": "lsdjfk43",
  "age": 10,
  "gender": "female"
} + 4 
{
  "id": "lsdjfk43",
  "age": 15,
  "gender": "female"
} + 5 
{ 
  "id": "kjfdhg87",
  "age": 30,
  "gender": "male"
} + 6 // this is moved from 3rd position to 6th position or index
{
  "id": "lsdjfk43",
  "age": 50,
  "gender": "female"
} + 7 
{
  "id": "lsdjfk43",
  "age": 19,
  "gender": "female"
} + 8

Below is the link for the code:

https://stackblitz.com/edit/angular-prettyprint-xhhzsk?file=src%2Fapp%2Fapp.component.ts

Answer 1

You can do this way

import { Component, OnInit } from "@angular/core";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit {
  name = "Angular";
  data = [
    { id: "fmgbwe45", age: 24, gender: "male" },
    { id: "kjregh23", age: 27, gender: "female" },
    { id: "kjfdhg87", age: 30, gender: "male" },
    { id: "lsdjfk43", age: 10, gender: "female" },
    { id: "lsdjfk43", age: 15, gender: "female" },
    { id: "lsdjfk43", age: 14, gender: "female" },
    { id: "lsdjfk43", age: 50, gender: "female" },
    { id: "lsdjfk43", age: 19, gender: "female" }
  ];
  from: "";
  to: "";

  ngOnInit() {}

  changeSelect(event, value) {
    if (value === "from") this.from = event.target.value;
    else this.to = event.target.value;
    if (this.from && this.to) {
      let tempSequence = this.data[parseInt(this.from) - 1];
      this.data[parseInt(this.from) - 1] = this.data[parseInt(this.to) - 1];
      this.data[parseInt(this.to) - 1] = tempSequence;
      console.log(this.data);
    }
  }
}

component.html

<h2>pretty-print:</h2>
<form action="/action_page.php">

  <label for="cars">Choose a from index:</label>
<select name="cars" (change)="changeSelect($event,'from')" >
  <option *ngFor="let data1 of data; let i = index" [value]="i+1">{{data1.age}}+ {{i+1}}</option>

</select>
==
  <label for="cars">Choose a To index:</label>

<select name="cars" (change)="changeSelect($event,'to')" >
  <option *ngFor="let data1 of data; let i = index" [value]="i+1">{{data1.age}}+ {{i+1}}</option>

</select>
<div *ngFor="let data1 of data; let i = index">
<pre >{{data1 | json}} + {{i+1}} </pre>
</div>
</form>