Displaying json data using angularJS in html page

Question

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

Any errors in console?

Sankar
– Sankar

2017-12-28 05:36:22 +00:00
Commented Dec 28, 2017 at 5:36 — Sankar
– Sankar, Commented Dec 28, 2017 at 5:36
No errrors in console

Learner
– Learner

2017-12-28 05:37:21 +00:00
Commented Dec 28, 2017 at 5:37 — Learner
– Learner, Commented Dec 28, 2017 at 5:37

marc_s · Accepted Answer · 2018-01-08 19:46:59Z

1

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

edited Jan 8, 2018 at 19:46

marc_s

760k186 gold badges1.4k silver badges1.5k bronze badges

answered Dec 28, 2017 at 5:44

ngCoder

2,1051 gold badge15 silver badges23 bronze badges

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

7 Comments

ngCoder Over a year ago

Try moving your script tags to head tags instead loading them in the body as Angular needs to be compiled first to render the data in scope

ngCoder Over a year ago

can you try to create a fiddle or plunker out of your code ? As I used your same code and it worked perfectly for me, the only difference was the script tags

ngCoder Over a year ago

Here is the update plunker of yours with bootstrap modules added and now the table looks more cool. plnkr.co/edit/IYAeOQVb9hxV7xlZyDCK?p=preview

Learner Over a year ago

please check the plunker now.

ngCoder Over a year ago

Please checck my updated answer it's the issue with angular version you are using! 1.6 doesn't support .success function for $http. You can lower your angular version if that's not a concern or else you can use .then function instead

|

Satpal Tanan · Accepted Answer · 2017-12-28 07:54:15Z

0

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;
   });

});

answered Dec 28, 2017 at 7:54

Satpal Tanan

1,1087 silver badges17 bronze badges

Collectives™ on Stack Overflow

Displaying json data using angularJS in html page

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related