CODEWITHSUNDEEP
angularjsjsonangular-controller
Learner
Learner

Reputation: 23

Displaying json data using angularJS in html page

I am trying to display data which is in json file in table using angularJS, but I get blank page as an output. The code is below. I have separate json file and separate js file in which I have defined angular controller. When I ran the application I got a blank page as an output.

View:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="angularTable">
<head>
<title></title>
<link href="content/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div role="main" class="container theme-showcase">
    <div class="" style="margin-top:90px">
        <div class="col-lg-8">
            <div class="page-header">
                <h2 id="tables">Searching,Sorting and Pagination in angularJS.</h2>
            </div>
            <div class="bs-component" ng-controller="listdata">
                <table class="table-striped table-hover">
                    <thead>
                        <tr>
                            <th>Id</th>
                            <th>First Name</th>
                            <th>Last Name</th>
                            <th>Hobby</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="user in users">
                            <td>{{user.id}}</td>
                            <td>{{user.first_name}}</td>
                            <td>{{user.last_name}}</td>
                            <td>{{user.hobby}}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/app.js"></script>

</body>
</html>

app.js-

var app = angular.module('angularTable', []);

app.controller('listdata', function ($scope, $http) {

$scope.users = []; //declare an empty array

$http.get("mockJson/mock.json").success(function (response) {

    alert('');
    $scope.users = response; //ajax request to fetch data into $scope.data

    });

});

mock.json:-

[ { "id": 1, "first_name": "Jhon", "last_name": "show", "hobby": "Eating" },
{ "id": 2, "first_name": "Jhon2", "last_name": "show2", "hobby": "Eating2" },
{ "id": 3, "first_name": "Jhon3", "last_name": "show3", "hobby": "Eating3" },
{ "id": 4, "first_name": "Jhon4", "last_name": "show4", "hobby": "Eating4" },
{ "id": 5, "first_name": "Jhon5", "last_name": "show5", "hobby": "Eatin5" },
{ "id": 6, "first_name": "Jhon6", "last_name": "show6", "hobby": "Eating6" },
{ "id": 7, "first_name": "Jhon7", "last_name": "show7", "hobby": "Eating7" },
{ "id": 8, "first_name": "Jhon8", "last_name": "show8", "hobby": "Eating8" },
{ "id": 9, "first_name": "Jhon9", "last_name": "show9", "hobby": "Eating9" },
{ "id": 10, "first_name": "Jhon10", "last_name": "show10", "hobby": "Eating10" },
{ "id": 11, "first_name": "Jhon11", "last_name": "show11", "hobby": "Eating11" },
{ "id": 12, "first_name": "Jhon12", "last_name": "show12", "hobby": "Eating12" },
{ "id": 13, "first_name": "Jhon13", "last_name": "show13", "hobby": "Eating13" },
{ "id": 14, "first_name": "Jhon14", "last_name": "show14", "hobby": "Eating14" },
{ "id": 15, "first_name": "Jhon15", "last_name": "show15", "hobby": "Eating15" },
{ "id": 16, "first_name": "Jhon16", "last_name": "show16", "hobby": "Eating16" },
{ "id": 17, "first_name": "Jhon17", "last_name": "show17", "hobby": "Eating17" },
{ "id": 18, "first_name": "Jhon18", "last_name": "show18", "hobby": "Eating18" },
{ "id": 19, "first_name": "Jhon19", "last_name": "show19", "hobby": "Eating19" },
{ "id": 20, "first_name": "Jhon20", "last_name": "show20", "hobby": "Eating20" },
{ "id": 21, "first_name": "Jhon21", "last_name": "show21", "hobby": "Eating21" },
{ "id": 22, "first_name": "Jhon22", "last_name": "show22", "hobby": "Eating22" },
{ "id": 23, "first_name": "Jhon23", "last_name": "show23", "hobby": "Eating23" },
{ "id": 24, "first_name": "Jhon24", "last_name": "show24", "hobby": "Eating24" },
{ "id": 25, "first_name": "Jhon25", "last_name": "show25", "hobby": "Eating25" }]

Upvotes: 0

Views: 4887

Answers (2)

ngCoder
ngCoder

Reputation: 2105

I don't see any issues with your code but made a slight modify of defining ng-app on body instead of html tag.

Here is the working plunker for the same

<body>
<div role="main" class="container theme-showcase" ng-app="angularTable">
    <div class="" style="margin-top:90px">
        <div class="col-lg-8">
            <div class="page-header">
                <h2 id="tables">Searching,Sorting and Pagination in angularJS.</h2>
            </div>
            <div class="bs-component" ng-controller="listdata">
                <table class="table-striped table-hover">
                    <thead>
                        <tr>
                            <th>Id</th>
                            <th>First Name</th>
                            <th>Last Name</th>
                            <th>Hobby</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="user in users">
                            <td>{{user.id}}</td>
                            <td>{{user.first_name}}</td>
                            <td>{{user.last_name}}</td>
                            <td>{{user.hobby}}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

</body>

Modify your HTML <head> tags like below 

<html xmlns="http://www.w3.org/1999/xhtml" ng-app="angularTable">
<head>
<title></title>
<link href="content/bootstrap.min.css" rel="stylesheet" />
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/app.js"></script>
</head>

From comments by OP the issue is with $http.get method which is using .success function which is no more used in 1.6 version.

Either OP can fallback to <1.6 versions or use .then function for success callbacks

Here is the updated plunker

When using .then function it has all the objects related to a response hence for data retrieval we should use response.data

Upvotes: 1

Satpal Tanan
Satpal Tanan

Reputation: 1108

I think the issue is with the angular version. $http.get(...).success is removed in angular 1.6

Try using the below, it uses the new syntax

var app = angular.module('angularTable',[]);

app.controller('listdata',function($scope,$http){

   $scope.users = [];

   $http.get("demo.json").then(function(response){
    $scope.users = response.data;
   });

});

Upvotes: 0

Related Questions