AngularJs : read Json or txt file and display data | ASPMANTRA | Asp.Net,MVC,AngularJs,Jquery,Javascript,Sql Server AND WCF 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

  

Post a Comment

[blogger]

MKRdezign

Contact Form

Name

Email *

Message *

Powered by Blogger.
Javascript DisablePlease Enable Javascript To See All Widget