JSON data is not getting displayed

Viewed 89

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

}

1 Answers
Related