CODEWITHSUNDEEP
angular
Stzl
Stzl

Reputation: 65

Angular 2 Updating Array object

I'm learning to create a CRUD apps using Angular 2. I'm facing some challenges while updating the array object.

When i hit the Update Employee button i'm calling onUpdateEmployee() function to updated the array. But values are not getting updated.

Please tell me what i'm doing wrong here.

This is the link to my Project: https://plnkr.co/edit/xRBeBH0gVm2W1PT0zAkH?p=preview

onUpdateEmployee(){
let emp = this.updateRow;
console.log(emp);
for(let i=0; i<this.Employees.length;i++){
 if(i==emp){
   this.Employees[i] = this.empyloyeeForm.value;
 }
}

}

Upvotes: 1

Views: 5715

Answers (3)

Benedikt Schmidt
Benedikt Schmidt

Reputation: 2278

The problem is that in your onUpdateEmployee() function you are trying to find the employee that you need to update, but your comparison is currently wrong.

let emp = this.updateRow;
for(let i=0; i<this.Employees.length;i++){
   if(i==emp){
     this.Employees[i] = this.empyloyeeForm.value;
   }
}

Your updateRow object is a real object that has a name and a role and your trying to compare it with a number in your for loop. That's not working which is why you never reach the code to set the new values in the form.

Edit 2

The edited version comes in with the problem that you're always going to update all objects with the same name, although you usually just want to update the one you clicked on, so this is not preferable at all. I'd say using a unique ID to identify all the employees is the better solution. Just make sure you give every new employee a new ID and then you can use it to find the correct employee when you want to update him.

Edit

As someone else noted there is an easier way to do it by just comparing the name of the employee to update inside the for loop.

let emp = this.updateRow;
for(let i=0; i<this.Employees.length;i++){
   // compare the names of the Employee you are editing with every other
   if(this.Emplyees[i].name==emp.name){
     this.Employees[i] = this.empyloyeeForm.value;
   }
}

Your updateRow object does not change while updating the fields, so it can be used to find the Employee in the list that you want to update.

(Original answer)

What you need to do is either have a unique ID for every employee as well, so you can compare that in your update function, or you have to keep track of the index that you are currently editing. So when hitting the edit button, you should save the i value somewhere in your component as a variable and when you pressing the update button you need to use it to compare it with the index of your for loop. But this only works if the list of emplyees is not altered in between. So for example if you hit the edit button, then delete a row and press update this code won't work anymore because the index is wrong.

So it would be better to save a unique ID for every employee when adding it, then you can always find it afterwards without relying on any index.

Upvotes: 1

Kishan
Kishan

Reputation: 793

you have to first bind your form variable to your updateRow variables and on submit assign those values to particular employee index variable. I have update your HTML file and ts file below are changes needed.

onEditEmpoyee(i){
    console.log(this.Employees[i]);
    this.updateRow.name = this.Employees[i].name;
    this.updateRow.role = this.Employees[i].role;
    this.updateRow.index = i;
    console.log(this.updateRow)
}

onUpdateEmployee(){
    let emp = this.updateRow;
    console.log(this.updateRow);
    this.Employees[this.updateRow.index].name = this.updateRow.name;
    this.Employees[this.updateRow.index].role = this.updateRow.role;
}

  
    
 <input type="text" class="form-control" [(ngModel)]="updateRow.name" id="name" formControlName="name" value="{{updateRow.name}}">
      <input type="text" class="form-control" id="role" formControlName="role" value="{{updateRow.role}}" [(ngModel)]="updateRow.role" >

Upvotes: 1

Deepak Jha
Deepak Jha

Reputation: 1609

or just try pushing into the array by using the .push method of javascript. Like this you can have the whole object pushed in one go, you need not loop it this way,

  updateArr(){
    this.myArr.push(this.emp);
  }

Upvotes: 0

Related Questions