JSON data is not getting displayed

Question

I am new to Angular JS, and am trying to call Rest API using JSON data. But when I run my HTTP-server, nothing is getting displayed. When I drop the response in console, am receiving the response.

Htmlcode :

<html ng-app="myapp">
<head>
<div ng-controller="header">
    <h1><center>{{apptitle}}</center></h1>
    </div>
<div ng-controller="contactinfo">
    <table class="table">
        <thead>
            <tr>
                <th>Sl.No</th>
                <th>Name</th>
                <th>Address</th>
                <th>Phno</th>
            </tr>
        </thead>
        <tbody ng-repeat="info in contact">
            <tr>
                <th scope="row">1</th>
                <td>{{ info.name }}</td>
                <td>{{ info.location }}</td>
                <td>{{ info.phone }}</td>
            </tr>
            <tr>
                <th scope="row">2</th>
                <td>{{ info.name }}</td>
                <td>{{ info.location }}</td>
                <td>{{ info.phone }}</td>
            </tr>
            </tr>
        </tbody>
    </table>
</div>

Angular code:

var app = angular.module('myapp',[]);
    app.controller('header',function($scope){
        $scope.apptitle = "Basic contacts App"
        }); 
    app.controller('contactinfo',function($scope,$http){
        $http.get('http://localhost:3000/contactinfo')
            .then(function(response){
                console.log(response);
            $scope.contact = response.data.contactinfo;
        });
    });

Expecting Response data :

{
"contactinfo" : [
    {
        "name" : "Jeremy Franke",
        "location":"madrid , Unitedkingdom",
        "phone" : 9874563210
    },
    {
        "name" : "Jade Raymond",
        "location":"portland , Netherland",
        "phone" : 9874563210
    },
    {
        "name" : "Franklin",
        "location":"texas , UnitedStates",
        "phone" : 9874563210
    }
]

}

Please past your full codes and response-data of http://localhost:3000/contactinfo. Thanks — lin
– lin, Commented Sep 14, 2017 at 13:05
Your HTML doc is invalid. Where do you include your angular.js ressource and application files? — lin
– lin, Commented Sep 14, 2017 at 13:24
I have included both the angular js and app code. But I am not able to include it in edit box @lin — vipe
– vipe, Commented Sep 14, 2017 at 13:28

lin · Accepted Answer · 2017-09-14 14:07:23Z

Please compare your solution with this demo fiddle carefully. Your approach is nice so there should be an other problem. Maybe you will be able to reproduce your problem while comparing your solution with this runnable code.

View

<!DOCTYPE html>
<html ng-app="myapp">
<head>
    <title>Demo</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://code.angularjs.org/1.4.7/angular.js" type="text/javascript"></script>
    <script src="script.js"></script>
</head>
<body>
        <div ng-controller="header">
            <h1><center>{{apptitle}}</center></h1>
        </div>

        <div ng-controller="contactinfo">-

            <table class="table">
                <thead>
                    <tr>
                        <th>Sl.No</th>
                        <th>Name</th>
                        <th>Address</th>
                        <th>Phno</th>
                    </tr>
                </thead>
                <tbody ng-repeat="info in contact">
                    <tr ng-repeat="info in contact">
                        <th scope="row">3</th>
                        <td>{{ info.name }}</td>
                        <td>{{ info.location }}</td>
                        <td>{{ info.phone }}</td>   
                    </tr>
                </tbody>
            </table>
        </div>
</body>
</html>

AngularJS application

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

    app.controller('header', function($scope) {
      $scope.apptitle = "Basic contacts App"
    });


    app.controller('contactinfo', function($scope, $http) {
      $http.get('./data.json')
        .then(function(response) {
          console.log(response);
          $scope.contact = response.data.contactinfo;
        });
    });

Collectives™ on Stack Overflow

JSON data is not getting displayed

1 Answer 1

View

AngularJS application

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

View

AngularJS application

Comments

Your Answer

Sign up or log in

Post as a guest

Related