All geek questions in one place

JSON data is not displayed

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

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

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

}

+4
source share
1 answer

Please compare your solution with this demo script . Your approach is good, so there should be another problem. You may be able to reproduce your problem by comparing your solution with this executable 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 app

    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;
        });
    });
+1
source

Source: https://habr.com/ru/post/1685676/

More articles:


All Articles