AngularJs : read Json or txt file and display data

In this article I am going to explain how to read JSON or txt file data and display using AngularJs.

In the previous article I have explained how to generate and download Json file inMVC, how to create multiselect dropdown with checkbox using Bootstrapmultiselect Jquery plugin and how to populate and validate the Dropdowncheckboxcustom control in asp.net.

Description:

 I have a JSON file and want to display file’s data using angularjs. We will use the get method to display data.

Implementation:

 Here is the JSON or txt (empjson.json) file:

[{"Id":1,"Name":"Vijay kumar","Phone":99665511,"Salary":54321,"Department":"Admin","ImagePath":null,"EmailId":"vijay@in.com"},{"Id":2,"Name":"Ramesh","Phone":222215,"Salary":32145,"Department":"Manager","ImagePath":"images/2.jpg","EmailId":"ramesh@gmail.com"},{"Id":3,"Name":"Rajiv","Phone":2554448,"Salary":88445,"Department":"Team Leader","ImagePath":"images/3.jpg","EmailId":"rajiv@hotmail.com"},{"Id":4,"Name":"Raj kumar","Phone":544577,"Salary":2154,"Department":"Developer","ImagePath":"images/4.jpg","EmailId":"raj@yahoo.com"},{"Id":5,"Name":"Tilak","Phone":5154545,"Salary":5585,"Department":"Administration","ImagePath":"images/5.jpg","EmailId":null},{"Id":6,"Name":"John","Phone":1111111,"Salary":1236,"Department":"Team Leader","ImagePath":"images/6.jpg","EmailId":"john@yahoo.co.in"},{"Id":7,"Name":"Martin","Phone":2222222,"Salary":5459,"Department":"Manager","ImagePath":"images/7.jpg","EmailId":null},{"Id":8,"Name":"Anil","Phone":555788,"Salary":2458,"Department":"Developer","ImagePath":null,"EmailId":null},{"Id":9,"Name":"Ricky","Phone":5454847,"Salary":2414,"Department":"Manager","ImagePath":null,"EmailId":null},{"Id":10,"Name":"Steve","Phone":54545474,"Salary":3695,"Department":"Developer","ImagePath":null,"EmailId":null}]

I have kept this file in project.

Add controller

Now add empty controller to project.

public class DemoController : Controller

    {

        //

        // GET: /Demo/

        DemoEntities1 db = new DemoEntities1();

        public ActionResult Index()

        {

            return View();

        }

    }

Add view

Add a view for controller action Index. To add view right clicks on it.

Complete source code of View:

@{

    ViewBag.Title = "AngualarJs Tutorial";

}

<style>

    .odd {

        background-color: antiquewhite;

        color: #008b8b;

    }

    td th {

        height: 30px;

        min-width: 100px;

    }

    thead {

        background-color: darkgray;

        color: white;

        height: 30px;

    }

</style>

<h2>AngualarJs Tutorial</h2>

<fieldset style="width:90%">

    <legend>Read Json file</legend>

    <div ng-app="mvcapp" ng-controller="AngularController"> 

        <table>

            <tr>

                <th>S.No.</th>

                <th>Name </th>

                <th>Phone </th>

                <th>Department</th>

                <th>Salary</th>

                <th>Image</th>

                <th>Email</th></tr>

            <tr ng-repeat="emp in employees">

                <td>{{$index+1}}</td>

                <td>{{emp.Name}}</td>

                <td>{{emp.Phone }}</td>

                <td>{{emp.Department}}</td>

                <td>{{emp.Salary }}</td>

                <td><img ng-src="{{emp.ImagePath || 'images/image.jpg'}}" alt="" title="{{emp.Name}}" width="150" height="150" /></td>

                <td>{{emp.EmailId ||'email not available' }}</td>

            </tr>

        </table>

    </div>

</fieldset>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>

<script>

    var angular = angular.module('mvcapp', []);

    angular.controller('AngularController', function ($scope, $http) {

        // $http.get('http://www.articlemirror.in/json/empjson.json').success(function (data)

        $http.get('/json/empjson.txt').success(function (data) {

            $scope.employees = data;

        });

    });

</script>

  

Now build and run the project. 

Result: