Could not read property '1' of undefined in angularjs when updating the form

advertisements

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


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);
    });
};