Getting TypeError using Angular.js and JavaScript

Question

I am getting the following error while selecting data using angular.js.

angularjs.js:107 TypeError: Cannot set property '0' of undefined
    at n.$scope.removeBorder (adminCustomerNewController.js:55)
    at fn (eval at <anonymous> (angularjs.js:212), <anonymous>:4:617)
    at n.$eval (angularjs.js:132)
    at angularjs.js:251
    at angularjs.js:263
    at m (angularjs.js:7)
    at $$writeModelToScope (angularjs.js:263)
    at angularjs.js:263
    at g (angularjs.js:261)
    at f (angularjs.js:261)

My code is given below.

<tr ng-repeat="d in days">
        <td>{{d.day_name}}</td>
        <td>
          <table>
            <tbody>
              <tr ng-repeat="answer in d.answers">
                <td>
                  <select class="form-control" id="answer_{{$index}}_{{$parent.$index}}_category" name="answer_{{$index}}_category" ng-model="answer.catagory" ng-options="cat.name for cat in listOfCatagory track by cat.value" ng-change="removeBorder($index,answer.catagory.value,$parent.$index);">
                    <option value="">Select Category</option>
                  </select>
                </td>
                 </tr>
            </tbody>
          </table>
          </td>
          <td>
          <table>
            <tbody>
              <tr ng-repeat="answer in d.answers">
                <td>
                  <select class="form-control" id="answer_{{$index}}_{{$parent.$index}}_subcategory" name="answer_{{$index}}_subcategory" ng-model="answer.subcatagory" ng-options="sub.name for sub in listOfSubCatagory[$index][$parent.index] track by sub.value">
                    <option value="">Select Subcategory</option>
                  </select>
                </td>
                </tr>
            </tbody>
          </table>
          </td>
          <td>
          <table>
            <tbody>
              <tr ng-repeat="answer in d.answers">
                <td>
                  <input type="text" id="answer_{{$index}}_{{$parent.$index}}_comment" name="answer_{{$index}}_comment" placeholder="Add Comment" ng-model="answers.comment">
                </td>

          </tr>
            </tbody>
          </table>
          </td>
          <td>
          <table>
            <tbody>
              <tr ng-repeat="answer in d.answers">
                <td>
                    <input type="submit" name="plus" id="plus" value="+" style="width:20px; text-align:center;" ng-click="addNewRow(d.answers, true)">
                    <div ng-show="$first && !$last">
                     <input type="submit" name="minus" id="minus" value="-" style="width:20px; text-align:center;" ng-click="removeRow(d.answers, $last)">
                     </div>
                </td>
          </tr>
            </tbody>
          </table>
          </td>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>

My controller side code is given below.

   $scope.days=[];
    $http({
        method:'GET',
        url:"php/customerInfo.php?action=day",
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
    }).then(function successCallback(response){
        //console.log('day',response.data);
         angular.forEach(response.data, function(obj) {
      obj.answers = [];
      $scope.addNewRow(obj.answers);
      $scope.days.push(obj);
    });
    },function errorCallback(response) {
    })
    }
     $scope.addNewRow = function(answers, hasDelete) {
    answers.push({
      category: null,
      subcategory: null,
      comment: null,
      hasDelete: hasDelete ? hasDelete : false
    });
  };

  $scope.removeRow = function(answers, $index){
    answers.splice($index, 1);
  };
  $scope.listOfSubCatagory = []; 
 // $scope.listOfSubCatagory = [[]]
  $scope.removeBorder=function(index,catvalue,parent){
      console.log('ind',index,catvalue,parent);
     //$scope['listOfSubCatagory'+parent][index]=[];
    //$scope.listOfSubCatagory[index][parent]=[[]];
    $scope.listOfSubCatagory[index] = []
    $scope.listOfSubCatagory[index][parent] = []
     var catdata=$.param({'action':'subcat','cat_id':catvalue});
        $http({
            method:'POST',
            url:"php/customerInfo.php",
            data:catdata,
            headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
        }).then(function successCallback(response){
            angular.forEach(response.data,function(obj){
                var data={'name':obj.subcat_name,'value':obj.subcat_id};
                $scope.listOfSubCatagory[index][parent].push(data);
            })
        },function errorCallback(response) {
        }) 
  }

I am getting error in this $scope.listOfSubCatagory[index][parent]=[];.

are you able to print value of index & parent in console.log? — brk
– brk, Commented Mar 18, 2016 at 6:59

Daniel · Accepted Answer · 2016-03-18 07:18:45Z

1

The error means parent is 0 and $scope.listOfSubCatagory[index][0] is undefined.

You need to initialize listOfSubCatagory as a 2d array:

$scope.listOfSubCatagory = [[]];

instead of

$scope.listOfSubCatagory = [];

Also:

You override $scope.listOfSubCatagory[index][parent].push(data); On every iteration of your for each loop.
Where do you initialize the full length of the 2d array? if parent or index was not 0 $scope.listOfSubCatagory[index][parent] would be undefined..

edited Mar 18, 2016 at 7:18

answered Mar 18, 2016 at 7:04

Daniel

6,5517 gold badges38 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

satya Over a year ago

yes, error has gone but its unable to set the data here $scope.listOfSubCatagory[index][parent].push(data);.

satya Over a year ago

@ Daniel : ok,but i created another row for same day using plus button and when i selected catagory again the same error came.

Daniel Over a year ago

@satya when you init $scope.listOfSubCatagory = [[]]; you only init $scope.listOfSubCatagory[0][0]. you need to initialize in the max-length of [index][parent] if you want it to be properly defined.

satya Over a year ago

i can only define max length of parent,but index will increment as per requirement.

Daniel Over a year ago

So each time the function is called, it's simply index++?

|

RIYAJ KHAN · Accepted Answer · 2016-03-18 10:40:23Z

0

In your current script $scope.listOfSubCatagory[index] is undefined as you not initilizing array at this index. Also need to initlize it at parent index as well

$scope.listOfSubCatagory[index][parent]=[]; // wrong one

The way you creating an array,is creating an sparse array.

$scope.listOfSubCatagory = [];
$scope.listOfSubCatagory[index] = []
$scope.listOfSubCatagory[index][parent] = []

EDIT 1:

instead of

$scope.listOfSubCatagory[index][parent].push(data);

use this

$scope.listOfSubCatagory[index][parent].push($.extend( {}, data));

edited Mar 18, 2016 at 10:40

answered Mar 18, 2016 at 7:27

RIYAJ KHAN

15.3k5 gold badges34 silver badges56 bronze badges

5 Comments

satya Over a year ago

ok,error gone but one problem suppose i pushed data into `$scope.listOfSubCatagory[0][1].push(data); but when i am selecting data from 1,0 its $scope.listOfSubCatagory[0][1] resetting which should not.

satya Over a year ago

when i am selecting the category from 2nd day ,the first day subcategory filed is getting reset even i selected value from 1dat subcategory befor.

RIYAJ KHAN Over a year ago

I dont understand how it is possible?you are selected and data getting restet. Please share sctipt

satya Over a year ago

Please check my post for the controller side code.here my requirement is there are 7 days one can create mupltiple row for the same day.when user will select the category the coresponding row subcategory will set using the value from database.

RIYAJ KHAN Over a year ago

Please check EDIT1

Collectives™ on Stack Overflow

Getting TypeError using Angular.js and JavaScript

2 Answers 2

6 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related