How to pass data to angularjs foreach inside foreach

Question

I have add my code and json which I want to loop. I have looped $scope.data using foreach loop and push to $scope.tempObj, its working fine. But when I try to loop $scope.data.policyDocumentContentCollection and push to $scope.tempObj.nested, its get console error "Cannot read property 'push' of undefine". Can I know how to push 2nd foreach data to nested array which is in $scope.tempObj.

$scope.data = [
   {
      "policyNo":"DBDP18S016696",
      "renewalNo":"001",
      "endorseNo":"001",
      "productDesc":"TBD",
      "policyDocumentContentCollection":[
         {
            "docType":"Credit Note1"
         },
         {
            "docType":"Tax Invoice1"
         }
      ]
   },
   {
      "policyNo":"DBDP18S016697",
      "renewalNo":"001",
      "endorseNo":"001",
      "productDesc":"TBD",
      "policyDocumentContentCollection":[
         {
            "docType":"Credit Note1"
         },
         {
            "docType":"Tax Invoice1"
         }
      ]
   },
   {
      "policyNo":"DBDP18S016698",
      "renewalNo":"001",
      "endorseNo":"001",
      "productDesc":"TBD",
      "policyDocumentContentCollection":[
         {
            "docType":"Credit Note1"
         },
         {
            "docType":"Tax Invoice1"
         }
      ]
   }
]



$scope.tempObj = [];

                    angular.forEach($scope.data, function (data) {
                        $scope.tempObj.push({
                            'id': data.policyNo,
                            'renewalNo': data.renewalNo,
                            'endorsementNo': data.endorseNo,
                            'product': data.productDesc,
                            'insuredName': data.holderName,
                            'periodOfInsurance': data.fromDate + ' to ' + data.toDate,
                            'nested': []
                        });
                        angular.forEach($scope.data.policyDocumentContentCollection, function (docs) {
                            $scope.tempObj.nested.push({
                                docName: docs.docType
                            })
                        });
                    });

$scope.tempObj.nested doesn't exist. $scope.tempObj is an array. — Jeremy Thille
– Jeremy Thille, Commented Jan 18, 2019 at 12:18
i think you have in the second loop you have to loop $scope.data and next you loop $scope.data[key].policyDocumentContentCollection — bik
– bik, Commented Jan 18, 2019 at 12:19

Samuel Vaillant · Accepted Answer · 2019-01-18 12:18:49Z

3

You can create an intermediate object to be able to push inside the current element. Right now you can't because you push on $scope.tempObj.nested which does not exist, only $scope.tempObj[index].nested exist because $scope.tempObj is an array.

angular.forEach($scope.data, function(data) {
  const element = {
    id: data.policyNo,
    renewalNo: data.renewalNo,
    endorsementNo: data.endorseNo,
    product: data.productDesc,
    insuredName: data.holderName,
    periodOfInsurance: data.fromDate + " to " + data.toDate,
    nested: []
  };

  angular.forEach(data.policyDocumentContentCollection, function(docs) {
    element.nested.push({
      docName: docs.docType
    });
  });

  $scope.tempObj.push(element);
});

answered Jan 18, 2019 at 12:18

Samuel Vaillant

3,8671 gold badge17 silver badges21 bronze badges

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

Comments

harish kumar · Accepted Answer · 2019-01-18 12:51:18Z

$scope.tempObj.nested does not exist because the $scope.tempObj is an array of object. So you have to first access the object at a specific index of $scope.tempObj array and then push the value into $scope.tempObj[index].nested array.

$scope.data = [
   {
      "policyNo":"DBDP18S016696",
      "renewalNo":"001",
      "endorseNo":"001",
      "productDesc":"TBD",
      "policyDocumentContentCollection":[
         {
            "docType":"Credit Note1"
         },
         {
            "docType":"Tax Invoice1"
         }
      ]
   },
   {
      "policyNo":"DBDP18S016697",
      "renewalNo":"001",
      "endorseNo":"001",
      "productDesc":"TBD",
      "policyDocumentContentCollection":[
         {
            "docType":"Credit Note1"
         },
         {
            "docType":"Tax Invoice1"
         }
      ]
   },
   {
      "policyNo":"DBDP18S016698",
      "renewalNo":"001",
      "endorseNo":"001",
      "productDesc":"TBD",
      "policyDocumentContentCollection":[
         {
            "docType":"Credit Note1"
         },
         {
            "docType":"Tax Invoice1"
         }
      ]
   }
]



$scope.tempObj = {};

                    angular.forEach($scope.data, function (data, index) {
                        $scope.tempObj = {
                            'id': data.policyNo,
                            'renewalNo': data.renewalNo,
                            'endorsementNo': data.endorseNo,
                            'product': data.productDesc,
                            'insuredName': data.holderName,
                            'periodOfInsurance': data.fromDate + ' to ' + data.toDate,
                            'nested': []
                        };
                        angular.forEach($scope.data.policyDocumentContentCollection, function (docs) {
                            $scope.tempObj[index].nested.push({
                                docName: docs.docType
                            })
                        });
                    });
j

Collectives™ on Stack Overflow

How to pass data to angularjs foreach inside foreach

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related