Issues accessing json data using AngularJS

Question

I've just started learning angularJS and am trying to figure out why the following code doesn't work

<html>
    <head>
        <title>Angular JS Ajax</title>
    </head>

    <body>
        <div ng-app="mainApp" ng-controller="studentController">
            <table>
                <tr>
                    <th>Name</th>

                    <th>Roll No</th>

                    <th>Percentage</th>
                </tr>

                <tr ng-repeat="student in students">
                    <td>{{ student.Name }}</td>

                    <td>{{student.RollNo}}</td>

                    <td>{{student.Percentage}}</td>
                </tr>
            </table>
        </div>

        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>

        <script>
            var mainApp = angular.module("mainApp");

            mainApp.controller("studentController", function($scope,$http){

                var url = "data.txt";

                $http.get(url).success(function(response){
                    $scope.students = response;
                });
            });
        </script>
    </body>
</html>

When I change the attribute of ng-app to "" (instead of "mainApp"'), and replace the` code above with the following, the application works. I'd really appreciate if anyone could explain to me why this is the case.

    <script>
        function studentController($scope, $http){
            var url = "data.txt";

            $http.get(url).success(function(response){
                $scope.students = response;
            });
        };
    </script>

Here's the data.txt file:

[
    {
        "Name": "Mahesh Parashar",
        "RollNo": 101,
        "Percentage": "80%"
    },

    {
        "Name": "Dinkar Kad",
        "RollNo": 191,
        "Percentage": "75%"
    }
]

Thank you!

what error you see in console?

Paresh Gami
– Paresh Gami

2016-02-18 03:07:05 +00:00
Commented Feb 18, 2016 at 3:07 — Paresh Gami
– Paresh Gami, Commented Feb 18, 2016 at 3:07

Paresh Gami · Accepted Answer · 2016-02-18 03:11:14Z

1

You forgot to add [] with app module declaration

var mainApp = angular.module("mainApp",[]);

answered Feb 18, 2016 at 3:11

Paresh Gami

4,7926 gold badges28 silver badges44 bronze badges

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

2 Comments

Dxml Over a year ago

Hi Paresh, Do you mind explaining to me the point of having the [] brackets, and whether they ever contain anything or should be empty in all cases? Thank you!

Paresh Gami Over a year ago

No it not empty always, you need to add depencies like ngMap, ngSenitize etc

Gracia · Accepted Answer · 2016-02-18 03:14:10Z

1

The first one is not working because you don't supply the right syntax for mainApp. You need to add [] for module declaration. This should look like below:

var mainApp = angular.module('mainApp', []);
    mainApp.controller('studentController', function($scope, $timeout) {
      var url = "data.txt";

      $http.get(url).success(function(response) {
          $scope.students = response;
      });
 });

The second one is working fine simply because you don't have any app module declaration.

answered Feb 18, 2016 at 3:14

Gracia

2141 silver badge7 bronze badges

2 Comments

Dxml Over a year ago

Ahhh, I complete forgot about the []. Do you mind explaining why we need the [] in the syntax, and do these brackets ever contain anything in some cases? Thanks!

Gracia Over a year ago

The bracket means injecting dependencies like 'ngAnimate', 'ngAria', 'ngCookies', 'ngResource', and etc depends on your project.

Wang Dan · Accepted Answer · 2016-02-18 03:08:11Z

0

You need to Parse it to json object Please try JSON.parse.

jsonObj = JSON.parse(response);

Hope this will help you

answered Feb 18, 2016 at 3:08

Wang Dan

638 bronze badges

Collectives™ on Stack Overflow

Issues accessing json data using AngularJS

3 Answers 3

2 Comments

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

Comments

Related