Cannot read property '1' of undefined in angularjs while updating form

Question

Im trying to implement an update form but when I click on the submit button, I have constantly this error :

TypeError: Cannot read property '1' of undefined

Here is my controller :

$scope.pets = [];

$http.get(baseApiUrl + '/pets').
success(function (data) {
  console.log("Success : " + data);
  $scope.pets = data;
}).error(function () {
  console.log(data);
});

$scope.UpdateData = function (index) {      
    $http({
        method: 'PUT',
        url: baseApiUrl + '/pets/' + index,
        data: {
            id: index,
            name: $scope.updateName[index],
            age: $scope.updateAge[index],
            owner: $scope.updateOwner[index],
        }
    }).then(function successCallback(response) {
        console.log(response);
    }, function errorCallback(response) {
        console.log(response);
    });
};

And this is my view :

<tbody>
    <tr ng-repeat="pet in pets track by pet.id">
        <td><input type="text" placeholder="{{ pet.name }}" name="name" class="form-control" ng-model="updateName[pet.id]" required></td>
        <td><input type="text" placeholder="{{ pet.age }}" name="age" class="form-control" ng-model="updateAge[pet.id]" required></td>
        <td><input type="text" placeholder="{{ pet.owner }}" name="owner" class="form-control" ng-model="updateOwner[pet.id]" required></td>
        <td><input id="update" type="submit" class="btn btn-danger disabled" ng-click="UpdateData(pet.id)" /></td>
    </tr>
</tbody>

I can't find why this is not working. If you have any suggestion. Thanks

You just have to initialize your array. https://plnkr.co/edit/wchymMDF2siOuhKOCLoW?p=preview — Vivz, Jun 20 '17 at 11:52

Ramesh Rajendran · Accepted Answer · 2017-06-20T12:14:05.257

I have asked a question related with this topic(but in C#) Create dynamic variable name Kindly check the question and answers. I hope that is helps to you.

There have a answer for we can't create dynamic variable in c#. same as we can't create any dynamic model name in angularjs.

But in this case we can create a new object name in a array(pets) dynamically.

Kindly try this below way

You need to change ng-model="pet.updateAge[pet.id]" to ng-model="pet.updateAge" and you can pass the pet object to your submit method via param ng-click="UpdateData(pet)"

    <tr ng-repeat="pet in pets track by pet.id">
    <td>
        <input type="text" placeholder="{{ pet.name }}"
        name="name" class="form-control" ng-model="pet.updateName"
        required>
    </td>
    <td>
        <input type="text" placeholder="{{ pet.age }}"
        name="age" class="form-control" ng-model="pet.updateAge"
        required>
    </td>
    <td>
        <input type="text" placeholder="{{ pet.owner }}"
        name="owner" class="form-control" ng-model="pet.updateOwner"
        required>
    </td>
    <td>
        <input id="update" type="submit" class="btn btn-danger disabled"
        ng-click="UpdateData(pet)" /></td></tr>

And you can get the values from the method param and you can use that as the below way

$scope.UpdateData = function (pet) {      
    $http({
        method: 'PUT',
        url: baseApiUrl + '/pets/' + pet.id,
        data: {
            id: pet.id,
            name: pet.updateName,
            age: pet.updateAge,
            owner: pet.updateOwner,
        }
    }).then(function successCallback(response) {
        console.log(response);
    }, function errorCallback(response) {
        console.log(response);
    });
};

This is still not working... The error is not here anymore but when I update all field are empty because pet.updateName is empty. — Valentin Ferey, Jun 20 '17 at 11:34
It should be work! May be you have missed some think from my code! Check one more time! — Ramesh Rajendran, Jun 20 '17 at 11:38
I agree ! But the variable pet in my controller is not defined anywhere. So this cannot working. — Valentin Ferey, Jun 20 '17 at 12:10

score 0 · Answer 2 · answered Jun 20 '17 at 11:11

I'm guessing that the error is thrown here:

$http({
    method: 'PUT',
    url: baseApiUrl + '/pets/' + index,
    data: {
        id: index,
        name: $scope.updateName[index],
        age: $scope.updateAge[index],
        owner: $scope.updateOwner[index],
    }
})

and is probably because at least one of $scope.updateName, $scope.updateAge and $scope.updateOwner is undefined. There's nothing in the provided code that would initialise these, and I suspect also in your code.

score 0 · Answer 3 · edited Jun 20 '17 at 12:04

0

You have not defined below items

 $scope.updateName[index],
 $scope.updateAge[index],
 $scope.updateOwner[index]

So checking that items/variables but it is not able to find so you are getting error

edited Jun 20 '17 at 12:04

Vivz

6,625
2
17
33

answered Jun 20 '17 at 11:14

vishal paalakurthi

138
1
9

score 0 · Answer 4 · answered Jun 20 '17 at 11:33

ngRepeat is an isolated scope , so values binded in ngRepeat scope are specific to that scope but not controller scope.

If you want to pass values from ngRepeat to controller its best to use ControllerAs approach as below

<body ng-app="myApp" ng-controller="myCrtl as ctl">
<table>
  <tbody>
    <tr ng-repeat="pet in ctl.pets">
      <td>
        <input type="text" placeholder="{{ pet.name }}" name="name" class="form-control" ng-model="ctl.updateName[pet.id]" ng-init="ctl.updateName[pet.id]=pet.name" required="" />
      </td>
      <td>
        <input type="text" placeholder="{{ pet.age }}" name="age" class="form-control" ng-model="ctl.updateAge[pet.id]" ng-init="ctl.updateAge[pet.id]=pet.age" required="" />
      </td>
      <td>
        <input type="text" placeholder="{{ pet.owner }}" name="owner" class="form-control" ng-model="ctl.updateOwner[pet.id]"  ng-init="ctl.updateOwner[pet.id]=pet.owner"required="" />
      </td>
      <td>
        <input id="update" type="submit" class="btn btn-danger disabled" ng-click="ctl.UpdateData(pet.id)" />
      </td>
    </tr>
  </tbody>
</table>

and you are just showing values with placeholders which means you are not actually assigning values to model , I have tweeted some of your code please check plunker below , Hope this helps your requirement

https://plnkr.co/edit/eP2dezbB2MaCUddVRb8O?p=preview

Valentin Ferey · Answer 5 · 2017-06-20T12:28:43.900

  $scope.pets = [];

$http.get(baseApiUrl + '/pets').
success(function (data) {
  console.log("Success : " + data);
  $scope.pets = data;
}).error(function () {
  console.log(data);
});

$scope.UpdateData = function (pet) {        
    $http({
        method: 'PUT',
        url: baseApiUrl + '/pets/' + pet.id,
        data: {
            id: pet.id,
            name: pet.updateName,
            age: pet.updateAge,
            owner: pet.updateOwner,
        }
    }).then(function successCallback(response) {
        console.log(response);
    }, function errorCallback(response) {
        console.log(response);
    });
};

Ok updates are working but I have an other error ! For example when I update the array[1] which have for id 2 this will modify the array[0]. So I have to fix it. Thanks for the solution.

kindly check the result of `pet` object in console.log() – Ramesh Rajendran Jun 20 '17 at 12:26 — Ramesh Rajendran, Jun 20 '17 at 12:26

Cannot read property '1' of undefined in angularjs while updating form

5 Answers5