Unable the fetch data in angularjs using http get request in Eclipse IDE

Question

I am trying to implement Http get request in angularjs . I am using Eclipse IDE and running my app on tomcat9.0 server.

This is my directory structure

index.html:

<!DOCTYPE html>
<html>

  <meta charset="utf-8">
  <title>AngularJS</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Angular JS -->  
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

<!--Route Guard -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>

<!-- Bootstrap CDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

<!-- Controller.js -->
<script src="controller.js"></script>

<body ng-app="myApp">

<div ng-view></div>

</body>
</html>

controller.js:

var app = angular.module("myApp", ["ngRoute"]);

app.config(function($routeProvider) {
    $routeProvider

    .when('/', {
    templateUrl : "login.html",
    controller : 'loginCtrl'
 })
     .when('/dashboard', {
    templateUrl: 'dashboard.html',
    controller : 'datactrl',
    resolve: {
        "check" : function($location, $rootScope) {
            if(!$rootScope.loggedIn) {
                $location.path('/');
            }
        }
    } 
})
    .otherwise({
        redirectTo : '/'
    });
});



app.controller('loginCtrl', function($scope ,$location , $rootScope) {
    $scope.submit = function(){

        if($scope.username == 'asd' && $scope.password == 'asd' ){
            $rootScope.loggedIn = true;
            $location.path('/dashboard');
        }
        else
        {
            alert("Invalid username and password")
        }
    };
});


app.controller('datactrl', function($scope, $http) {
    $http.get('http://localhost:8082/AngularJSTest/database.json')
    .then(function(response) {
        $scope.persons = response.records;
    });
});

login.html:

<div class="col-sm-8 col-sm-push-4">
</div>

<div class="col-sm-4 col-sm-pull-4" style="margin: auto;">
<br><br><br><br><br><br>
<h3>Login </h3><hr>
  <form  id="myLogin">

    <div class="form-group">
      <label for="username">UserName:</label>
      <input type="text" class="form-control" id="username" placeholder="Enter UserName" ng-model="username">
    </div>
    <div class="form-group">
      <label for="pwd">Password:</label>
      <input type="password" class="form-control" id="password" placeholder="Enter password" ng-model="password">
    </div>

    <div class="checkbox">
      <label><input type="checkbox" name="remember"> Remember me</label>
    </div>

    <button type="button" class="btn btn-primary" ng-click="submit()">Login</button>
  </form>

</div>

dashboard.html:

<div>
    <ul>
        <h4>Name And Age Of The persons</h4>
        <li ng-repeat="person in persons">
            {{ person.Name+ ':' + person.Age }}          
        </li>           
    </ul>
</div>

database.json:

{
    "records": [
    {
    "Name" : "asd",
    "Age" : "20"
    },

    {
    "Name" : "asd",
    "Age" : "20"
    },

    {
    "Name" : "asd",
    "Age" : "20"
    }

    ]
}

And I am able to access my data file as shown below in the browser

As I run my app and login , I am redirected to dashboard ,but I am only seeing the text " Name And Age Of The persons " and not the data from json file.

Can anybody please tell me where I am mistaken and why the data is not being fetched.

Now this is what I am getting in my console. but data not displayed.

Check the console in developer tools, opened using F12.

Klooven
– Klooven

2018-05-07 11:07:10 +00:00
Commented May 7, 2018 at 11:07 — Klooven
– Klooven, Commented May 7, 2018 at 11:07
share full dashboard.html file

Hitesh Kansagara
– Hitesh Kansagara

2018-05-07 11:11:07 +00:00
Commented May 7, 2018 at 11:11 — Hitesh Kansagara
– Hitesh Kansagara, Commented May 7, 2018 at 11:11
@Klooven......... i dont find any errors in my console

Heena
– Heena

2018-05-07 11:19:29 +00:00
Commented May 7, 2018 at 11:19 — Heena
– Heena, Commented May 7, 2018 at 11:19

User4567 · Accepted Answer · 2018-05-07 11:44:13Z

1

Try printing response object in the console and check how it is formed, data is bind to response or response.records, Change your request url to /database.json or database.json and try.

$http.get('database.json')
.then(function(response) {
    console.log(response);
});

edited May 7, 2018 at 11:44

answered May 7, 2018 at 11:39

User4567

1,0251 gold badge13 silver badges27 bronze badges

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

4 Comments

Heena Over a year ago

I am getting this s=in my console.. but the data is not displayed ....Object { data: {…}, status: 200, headers: xd(), config: {…}, statusText: "", xhrStatus: "complete" }

Heena Over a year ago

I have edited my question and added the latest screen shot of my output window. please have alook

Rob Angelier Over a year ago

@Heena it looks like the path should be response.data.results, according to your database.json

User4567 Over a year ago

It is response.data.records

Collectives™ on Stack Overflow

Unable the fetch data in angularjs using http get request in Eclipse IDE

This is my directory structure

And I am able to access my data file as shown below in the browser

Now this is what I am getting in my console. but data not displayed.

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

This is my directory structure

And I am able to access my data file as shown below in the browser

Now this is what I am getting in my console. but data not displayed.

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related