CODEWITHSUNDEEP
javascriptangularjsforms
Valentin Ferey
Valentin Ferey

Reputation: 43

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

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

Upvotes: 2

Views: 418

Answers (5)

Valentin Ferey
Valentin Ferey

Reputation: 43

  $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.

Upvotes: 0

Ramesh Rajendran
Ramesh Rajendran

Reputation: 38683

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

Upvotes: 1

vishal paalakurthi
vishal paalakurthi

Reputation: 138

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

Upvotes: 0

Srinivas ML
Srinivas ML

Reputation: 730

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

Upvotes: 0

phuzi
phuzi

Reputation: 13060

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.

Upvotes: 0

Related Questions