Click here to Skip to main content
15,936,903 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
we have to implement nested ng-repeat in asp.net mvc with angularjs below code we have used its not working.
we want grouping content category based product listing. please anyone help ASAP. Below code we have used

Expected output:
Category1
	Product1 catg1
	Product2 catg1

Category2
	Product1 catg2
	Product2 catg2



What I have tried:

index.cshtml file:

<div data-ng-repeat="catg in Categorys">
{{catg.ecom_category_title}}
<ul data-ng-repeat="prd in Products">
    <li>{{prd.ecom_product_title}}</li>
</ul>
</div>

category.js file:

$http.get('/api/Category/ListAllCategory', { params: {} }).success(function (data) {
    $scope.Categorys = data;
    for (var i = 0; i < $scope.Categorys.length; i++) {
        $scope.getCategoryID = $scope.Categorys[i].ecom_category_id;
        $http.get('/api/Product/ListAllProductByCategory', { params: { ecom_category_id: $scope.getCategoryID } }).success(function (response) {
            alert('dsfsdf');
            $scope.Products = response;
        })
       .error(function () {
           $scope.error = "Some Error.";
       });
    }

})
.error(function () {
    $scope.error = "Some Error.";
});
Posted
Updated 7-Nov-17 22:59pm

1 solution

Getting the products in a loop through $http.get request is not a good idea, since it works on asynchronos reqest, the result which you get from the loop is not a valid for the particular category, since before executing the first ajax call the loop would have completed the iteration.
More over this will result in numerous request to the server which will reduce the performance of the system.
simple way to achieve the grouping is by joining the data in the server and return as json to the browser and pass it to the ng-repeat as

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
    <div ng-app="myApp" ng-controller="customersCtrl">   

        <div data-ng-repeat="catg in Categorys">
            {{catg.ecom_category_title}}
            <ul data-ng-repeat="prd in catg.Products">
                <li>{{prd.ecom_product_title}}</li>
            </ul>
        </div>

    </div>

    <script>
        var app = angular.module('myApp', []);
        app.controller('customersCtrl', function ($scope, $http) {
           // get the data from server 
            var data = [{ ecom_category_title: 'cat1', Products: [{ ecom_product_title: 'cat1 prod 1' }, { ecom_product_title: 'cat1 prod 2' }] },
            { ecom_category_title: 'cat2', Products: [{ ecom_product_title: 'cat2 prod 1' }, { ecom_product_title: 'cat2 prod 2' }] },
            { ecom_category_title: 'cat3', Products: [{ ecom_product_title: 'cat3 prod 1' }, { ecom_product_title: 'cat3 prod 2' }] }]
            $scope.Categorys = data;
        });
    </script>

</body>
</html>


Demo: Plunker[^]

Controller code to join the data
string[] categoryNames = { "aa", "bb" };
          List<Category> lst = new List<Category>();
          foreach (string cat in categoryNames)
              lst.Add(new Category() { CategoryName = cat, Products = GetProducts(cat) });
          return JSON(lst);


private static Product[] GetProducts(string cat)
     {
        // your code to get the list of products
         return null;
     }
 
Share this answer
 
v2
Comments
Member 12523149 8-Nov-17 5:13am    
Thanks for your quick replay

your reference code static content loading, but we have to implement dynamic content from webapi link link ('/api/Category/ListAllCategory' based on '/api/Product/ListAllProductByCategory') linked with category. we have to get data from database using webapi. Please explain how to do.
Karthik_Mahalingam 8-Nov-17 5:24am    
static is just for an example
get the data from /api/Category/ListAllCategory store it in a list
iterate the list
get the data from /api/Product/ListAllProductByCategory store it in a list
join the list as mentioned in the above code and convert it to json and pass it to angular.
Member 12523149 8-Nov-17 5:30am    
Thanks
Can you please how to iterate two links.This is new one for me. Please explain

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900