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

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

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"
    }

]

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
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.

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.

<html>
<head>
    <title>Angular JS Includes</title>
    <style>
        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;
            }
    </style>
</head>
<body>
    <h2>AngularJS Sample Application</h2>
    <div ng-app="" ng-controller="categoryController">
        <table>
            <tr>
                <th>Category ID</th>
                <th>Category Name</th>
            </tr>
            <tr ng-repeat="category in categories">
                <td>{{ category.CategoryID }}</td>
                <td>{{ category.CategoryName }}</td>
            </tr>
        </table>
    </div>
    <script>
        function categoryController($scope, $http) {
            var url = "http://localhost:65028/category.txt";
            $http.get(url).success(function (response) {
                $scope.categories = response;
            });
        }
    </script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"></script>
</body>
</html>

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