AngularJs : read Json or txt file and display data - Free Asp.Net,MVC,AngularJs,Jquery,Javascript,Sql Server,WCF,Entity framework snippets and tutorial

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.


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:
AngularJs : read Json or txt file and display data

  

What do you think about this article?

If you found this article useful, please share and follow on Facebook, Twitter, Google Plus and other social media websites. To get free updates subscribe to newsletter. Please put your thoughts and feedback in comments section.

Share this

Share on FacebookTweet on TwitterPlus on Google+


EmoticonEmoticon