Mvc with angularjs - nested repeater

Question

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 7-Nov-17 22:26pm

Member 12523149

Updated 7-Nov-17 22:59pm

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

Karthik_Mahalingam · Answer 1 · 2017-11-07T22:59:00

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