AngularJS not reading JSON properly

Question

I created an application so that it can read JSON file data using AngularJS HTTP Get method but I am not getting the result in the table as expected. Below is the code:

HomeController

 using System;
 using System.Collections.Generic;
 using System.Linq;
 using System.Web;
 using System.Web.Mvc;

 namespace CategoryWebApplication.Controllers
 {
public class HomeController : Controller
{
    // GET: Home
    public ActionResult Index()
    {
        return View();
    }
  }
}

The View : Index.cshtml

<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>Sample Category 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:4425/Category.txt";
        $http.get(url).success(function (response) {
            $scope.categories = response;
        });
    }
</script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js">    </script>
</body>
</html>

And the JSON in the text file category is the following: Category.txt

[
{
"CategoryID" : 1,
"CategoryName" : "Blood"
},
{
"CategoryID" : 2,
"CategoryName" : "Urine"
},
{
"CategoryID" : 3,
"CategoryName" : "Saliva"
},
{
"CategoryID" : 4,
"CategoryName" : "Serum"
},
{
"CategoryID" : 5,
"CategoryName" : "Hair"
},
{
"CategoryID" : 6,
"CategoryName" : "Nail"
},
{
"CategoryID" : 7,
"CategoryName" : "Tissue"
}

]

Below is the result I am getting in the browser

Did you specify the header to be Content-type: application/json? — Joy
– Joy, Commented Aug 26, 2015 at 14:52
Something like: $http.get({ method: 'get', url: '', headers: {Content-type: 'application/json'}). — Joy
– Joy, Commented Aug 26, 2015 at 15:01

Mudasser Ajaz · Accepted Answer · 2015-08-26 15:21:47Z

2

Change file extension from txt to json (Category.json).

And change your javascript code to this. Define module and controller:

var app = angular.module("myApp");
app.controller("categoryController", function($scope,$http){
  var url = "http://localhost:4425/Category.json";
  $http.get(url).success(function (response) {
     $scope.categories = response;
  });
})

Markup:

<div ng-app="myApp" ng-controller="categoryController">

Here i have made a live DEMO, so you can see how it is working.Plus you should go through documentation of angular controllers.

edited Aug 26, 2015 at 15:21

answered Aug 26, 2015 at 14:51

Mudasser Ajaz

6,2571 gold badge28 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Loic Over a year ago

@mudaseer, I have changed the file extension but the same result appears.

Mudasser Ajaz Over a year ago

@Loic as jax mentioned, check if you have changed file name in call too, and please have a look how controller and module has been defined. I have edited answer.

Loic Over a year ago

Yes, I did change the http to "localhost:4425/Category.json", but still the same result. I will try changing the controller and module.

Mudasser Ajaz Over a year ago

@Loic i have added demo link and documentation link to my answer, so you can see things in more detail.

Aamir Over a year ago

i was facing a similar kind of trouble, server correctly sending the json data but angular was not reading it properly. After research of several hours came across to JSON.parse() and bang it worked like a charm. More reference: w3schools.com/js/js_json_parse.asp

|

Aamir · Accepted Answer · 2018-04-18 21:02:23Z

1

i was facing a similar kind of trouble, server correctly sending the json data but angular was not reading it properly. After research of several hours came across to JSON.parse() and bang it worked like a charm. More reference: https://www.w3schools.com/js/js_json_parse.asp

answered Apr 18, 2018 at 21:02

Aamir

7251 gold badge11 silver badges28 bronze badges

Collectives™ on Stack Overflow

AngularJS not reading JSON properly

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related