How to read JSON file data using AngularJS HTTP Get method.

In this blog, I am going to show you how you can read JSON content from file and display in ASP.NET MVC view.

  1. Create Empty ASP.NET MVC application

    As a first step create an empty Web application with MVC configuration.

    Open your Visual Studio -> from file menu select -> New -> Project

    From New Project window -> Select Web -> ASP.NET Web Application -> Click Ok

    From Select Template window Select Empty and from Add folders and core references for select MVC -> click Ok

    It creates a new ASP.NET MVC application with a basic configuration.

    For more details see Getting Started with ASP.NET MVC

  2. Create JSON content file

    In this step, you will add a simple text file that contains categories data in JSON format.

    Right click on Project -> Select Add -> New Item

    From the left pane of the window select C# -> General and then select Text File.

    Give name category.txt. Make sure this file is get added in the root directory of the project.

    Add below JSON contents to category.txt file.

        "CategoryID" : 1,
        "CategoryName" : "Beverage"
        "CategoryID" : 2,
        "CategoryName" : "Condiment"
        "CategoryID" : 3,
        "CategoryName" : "Confection"
        "CategoryID" : 4,
        "CategoryName" : "Beverage"
        "CategoryID" : 5,
        "CategoryName" : "Dairy"
        "CategoryID" : 6,
        "CategoryName" : "Grains"
        "CategoryID" : 7,
        "CategoryName" : "Seafood"
  3. Add controller and Action method

    Add a new folder with the name Controllers under the project.

    Right click on Controller folder -> Select Add -> Controller -> Select MVC 5 - Empty -> click Ok.

    Give name HomeController and click ok. You can see the action method with the name Index.

    If you do not have the Index action method in HomeController then add the below code.

        public class HomeController : Controller
            public ActionResult Index()
                return View();

    For more detail understanding see ASP.NET MVC Controller and Action methods

  4. Add Index View

    Open HomeController and right click on Index select Add View.

    It adds a new view under Views -> Home folder.

    In Index.cshtml, you will add the AngularJS controller and directives like ng-app. See basic Hello world example with AngularJS and ASP.NET MVC.

  5. AngularJS ng-app and ng-controller

    ng-app: is AngularJS a directive. Which specifies the root element of the application. It usually used with root elements with of page like body or html tags.

    ng-controller: is an AngularJS directive which attaches Angular controller to view.

    Add the below code in index.cshtml file.

        <title>Angular JS Includes</title>
            table, th, td {
                border: 1px solid grey;
                border-collapse: collapse;
                padding: 5px;
                table tr:nth-child(odd) {
                    background-color: #f2f2f2;
                table tr:nth-child(even) {
                    background-color: #ffffff;
        <h2>AngularJS Sample Application</h2>
        <div ng-app="" ng-controller="categoryController">
                    <th>Category ID</th>
                    <th>Category Name</th>
                <tr ng-repeat="category in categories">
                    <td>{{ category.CategoryID }}</td>
                    <td>{{ category.CategoryName }}</td>
            function categoryController($scope, $http) {
                var url = "http://localhost:65028/category.txt";
                $http.get(url).success(function (response) {
                    $scope.categories = response;
    <script src=""></script>

    This code adds the required AngularJS library. Associate ng-app and ng-controller with div.

    Code adds categoryController which reads JSON contents from Category.txt file. Notice the URL uses localhost with port number you might require to change that port number.

    It uses $http.get to call url. The response of $http.get is assigned to $scope which can be used in div where controller is assigned.

    $http.get response is assigned to $scope.categories and it is used in div to display contents.

    It shows below output

    AngularJS http get example with JSON file

Source code on Git hub Source Code on Github

Speak your mind
Please login to post your comment!

  • geeksarray user
    01/01/2018 04:38 AM boopathiysd

    Its really superb in this information in totally different approach i need example with more details...

  • geeksarray user
    10/11/2018 03:54 AM Bhu

    very nice article thanks for sharing

Blog Search

If you like my content please feel free to buy me coffee. Buy Me A Coffee