[Solved] AngularJS ng-repeat not displaying JSON data in ASP.Net MVC

Last Reply one month ago By dharmendr

Posted one month ago

Hi,

I am going to implment nested grid view

currently probelm in my code is that

it was displaying only sub grid view

in main grid view values are not displaying

at the time of fecthing all values are coming

but here it was displaying only sub grid view values

could you please help me

@{ 
    Layout = null;
}
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Index</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/angular-utils-pagination@0.11.1/dirPagination.js"></script>
    <script type="text/javascript">
        var app = angular.module('MyApp', ['angularUtils.directives.dirPagination']);
        app.filter("dateFilter", function () {
            return function (item) {
                if (item != null) {
                    return new Date(parseInt(item.substr(6)));
                }
                return "";
            };
        });
        app.controller('MyController', function ($scope, $http, MyService) {
            GetAllEmployees();
            //To Get All Employee Records  
            function GetAllEmployees() {
                debugger;
                var getData = MyService.getemployee();
                getData.then(function (emp) {
                    $scope.Customers = emp.data;
                }, function (emp) {
                    alert("Records gathering failed!");
                });
            }

        });
        app.service("MyService", function ($http) {
            //get All Employees
            this.getemployee = function () {
                debugger;
                return $http.get("/nestedgridview/GeCustomerOrders");
            };
        });
    </script>
</head>
<body>
    <div ng-app="MyApp" ng-controller="MyController">
        <table class="table table-responsive">
            <thead>
                <tr class="success">
                    <th></th>
                    <th>Id</th>
                    <th>Name</th>
                    <th>Address</th>
                </tr>
            </thead>
            <tbody dir-paginate="customer in Customers|orderBy:sortKey:reverse|filter:search|itemsPerPage:10">
                <tr ng-class-even="'even'" ng-class-odd="'odd'">
                    <td>
                        <button type="button" ng-click="expanded = !expanded" class="btn btn-default">
                            <span ng-bind="expanded ? '-' : '+'"></span>
                        </button>
                    </td>
                    <td>{{customer.CustomerID }}</td>
                    <td>{{customer.ContactName }}</td>
                    <td>{{customer.Address}}</td>
                </tr>
                <tr class="sub" ng-show="expanded">
                    <td></td>
                    <td colspan="5">
                        <table class="table table-responsive">
                            <tr class="info">
                                <th>OrderDate</th>
                                <th>Ship Name</th>
                            </tr>
                            <tr dir-paginate="order in customer.Orders|orderBy:sortKey:reverse|filter:search|itemsPerPage:10"
                                ng-class-even="'even'" ng-class-odd="'odd'">
                                <td>
                                    <input type="hidden" ng-model="order.OrderID" />
                                    {{order.OrderDate | dateFilter | date:"dd-MM-yyyy"}}
                                </td>
                                <td>{{order.ShipName}}</td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>

 

        [HttpGet]
        public JsonResult GeCustomerOrders()
        {
            List<CustomerModel> CO = new List<CustomerModel>();
          
                var cust = db.Customers.OrderBy(a => a.ContactName).ToList();
                foreach (var i in cust)
                {
                    var orders = db.Orders.Where(a => a.CustomerID.Equals(i.CustomerID)).OrderBy(a => a.OrderDate).ToList();
                    CO.Add(new CustomerModel
                    {
                        Customers = i,
                        Orders = orders
                    });
                }
            return new JsonResult { Data = CO, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
        }

 

    public class CustomerModel
    {
        public Customer Customers { get; set; }
        public List<Order> Orders { get; set; }
    }

 

Posted one month ago
mahesh213 says:
 <td>{{customer.CustomerID }}</td>
                    <td>{{customer.ContactName }}</td>
                    <td>{{customer.Address}}</td>

Change above with below code. 

<td>{{customer.Customers.CustomerID }}</td>
<td>{{customer.Customers.ContactName }}</td>
<td>{{customer.Customers.Address}}</td>

The properties are available inside the Customers object if Customers array like the Orders object.