How to add Data to Specific index of json array using angularjs

Question

I was created table data and edit button and i am getting problem when i was trying to add edit data to specific row.

Here my plunkr :- http://plnkr.co/edit/QKz7nu458i8Il4OLmAyw?p=preview

Here HTML page

    <table class="table table-bordered">
                <thead>
                    <tr>
                        <th><input type='checkbox' ng-modal='isall' ng-click='selectallrows()'></th>
                        <th>ID</th>
                        <th>Name</th>
                        <th>EDIT</th>

                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat='p in person' ng-class="{'success':tableselection[$index]}">
                        <td><input type='checkbox' ng-model='tableselection[$index]'></td>
                        <td>{{p.id}}</td>
                        <td>{{p.name}}</td>
                        <td><button class='btn btn-primary' ng-click='edit(p.id)'><span class="glyphicon glyphicon-pencil"></span>Edit</button></td>
                    </tr>
                </tbody>

            </table>
<div ng-show='editabledata'>
      <form role='form' class='form-horizontal'>

        <div class='form-group'>
      <label>Id :-</label>
      <input type='text' ng-model='pid' class='from-group col-sm-2'></div>
      <div class='form-group'>
      <label>Name:-</label>
      <input type='text' ng-model='pname' class='from-group col-sm-2'>
      </div>
      <button class='btn btn-primary' ng-click='saveeditdata(pid)'>Save</button>
      <button clas='btn btn-primary' ng-click='canceleditdata()'>Cancel</button>
      </form>
    </div>

Here my .js

$scope.person=[
        {id:1,name:'devendher'},
        {id:2,name:'Macha'},
        {id:3,name:'Macha devendher'}
        ];

    $scope.editabledata=false;
  $scope.edit=function(id){
    $scope.editabledata=true;

   for(i=0;i<$scope.person.length;i++){

     if($scope.person[i].id==id)
   {
     $scope.pid=$scope.person[i].id;
     $scope.pname=$scope.person[i].name;
   }

   }
  }


  $scope.saveeditdata=function(id){
    for(i=0;i<$scope.person.length;i++){
      if($scope.person[i].id==id){
        $scope.person[i].push({'id':$scope.pid,'name':$scope.pname})
      }
    }


  }

i got error " $scope.person[i].push " is not a function Is there any alternate way to add data to specific index of array?

score 2 · Accepted Answer · answered Feb 06 '16 at 17:36

2

I think you mean:

$scope.person.push({...})

Or

$scope.person[i] = {...}

answered Feb 06 '16 at 17:36

Gavriel

18,880
12
68
105

score 2 · Answer 2 · edited May 23 '17 at 12:15

This is very over complicated and you aren't taking advantage of using a single object for the form data. In addition you are using different property names for the editing vs original object. All the loops you are doing are unnecessary

Much simpler steps:

To edit object, pass whole object to controller function :

  <button  ng-click='edit(p)'>

In controller make copy of object and store reference to the selected one to update later

$scope.edit=function(person){ 
   $scope.editabledata = true;
   $scope.selectedItem = person;
   $scope.editItem = angular.copy(person);
}

In edit form use full object reference in ng-model. No need to create individual variables, use the properties that already exist

ID :  <input ng-model="editItem.id">
Name: <input ng-model="editItem.name">

In the save function extend the original object with the updated one

$scope.saveeditdata=function(){
   // merge updates
   angular.extend($scope.selectedItem , $scope.editItem);
   // reset
   $scope.editabledata = false;
   $scope.editItem = {};

}

For delete see : How do I delete an item or object from an array using ng-click?

DEMO

Yeah,Thank you very much :) – macha devendher Feb 07 '16 at 05:27 — macha devendher, Feb 07 '16 at 05:27

How to add Data to Specific index of json array using angularjs

2 Answers2