Iterate json data using AngularJS in MVC

by Ashwini Verma  |  23 June, 2016  |  Views : 895

I have written article before on displaying grid in MVC. AngularJS can be one of the ways to do the same. This is not recommended for large records since you have to play around more it for pagination and sorting.

However, if records are not much then this can be useful. One more advantage is that we can make our own template to design the table. Suppose you are consuming data from some services or web apis then this method will be very useful since we can read that service's data and iterate through AngularJS.

Here are the steps to iterate json data using AngularJS.

Step 1 : Create new view page.

[HttpGet]
public ActionResult AngularJS()
{
     return View();
}

Step 2 : design your template.

Table design will be simple as normal html and css. The main point is to note here that we will use ng-repeat directive of angular js for <tr> iteration.

Here is what angularJS doc says about ng-repeat : "The ngRepeat directive instantiates a template once per item from a collection. Each template instance gets its own scope, where the given loop variable is set to the current collection item, and $index is set to the item index or key."

<div ng-app="myApp" ng-controller="productCtrl">
<table class="table table-bordered">
        <thead>
            <tr>
                <th>Product ID</th>
                <th>Name</th>
                <th>Price</th>
                <th>Department</th>
            </tr>
        </thead>
        <tr ng-repeat="x in products">
            <td>{{x.Id}}</td>
            <td>{{x.Name}}</td>
            <td>{{x.Price}}</td>
            <td>{{x.Department}}</td>
        </tr>
    </table>
</div>

Step 3 : Add bootstrap css, jquery and angularJS library.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<script src="~/Scripts/jquery-2.2.3.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.1/angular.min.js"></script>

Step 4 : Add angularJS script to consume data in Json format.

<script type="text/javascript">
    var app = angular.module('myApp', []); 
    app.controller('productCtrl', function ($scope, $http) {  
        $http.get('/Home/GetData/').success(function (data) {  
            $scope.products = data;
        });
    });
</script>

Step 5 : method in controller to get data.

public class ProductSample
{
    public int Id { get; set; }
    public string Name { get; set; }
    public decimal Price { get; set; }
    public string Department { get; set; }
}

public ActionResult GetData()
{
    List products = new List();

    products.Add(new ProductSample() { Id = 1, Name = "Remote Car", Price = 5.2m, Department = "Toys" });
    products.Add(new ProductSample() { Id = 2, Name = "Pen", Price = 1.2m, Department = "Stationary" });
    products.Add(new ProductSample() { Id = 3, Name = "Teddy Bear", Price = 2.2m, Department = "Toys" });
    products.Add(new ProductSample() { Id = 4, Name = "Tennis Boll", Price = 1.2m, Department = "Toys" });

    return Json(products, JsonRequestBehavior.AllowGet);
}

That's it. We have done. Output will be as follow.

Let me know what you think.


posted on : 23-06-2016 00:00:00 viewed : 895

Follow Us

Latest News