$http.get API response in HTML Table using angular js

Question

I want to bind the data from URL to the HTML table. But I can't display it. It can be binded below the HTML table. But HTML table is not displaying data from the API.

Here is my code:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
  $http.get("http://ec2-35-164-0-168.us-west-2.compute.amazonaws.com/panasonic_dubai/_search?q=%2Bdirection%3AIncomming")
    .then(function(response) {
        $scope.result = response.data;
      },
      function myError(response) {
        $scope.result = response.statusText;
      });
});

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body>
  <title>demo</title>
  <div ng-app="myApp" ng-controller="myCtrl">

    <p>Simple Table</p>
    <table border="1" cellsapcing="5" cellpadding="5" width="400">
      <tr>
        <th>ID</th>
        <th>Number</th>
      </tr>
      <tr>
        <td>{{result.id}}</td>
        <td>{{result.number}}</td>
        <tr>
        </tr>
    </table>

    <h3>{{result}}</h3>

  </div>
</body>
</html>

you need ng-repeat to iterate through the result.

Claies
– Claies

2017-09-09 15:49:44 +00:00
Commented Sep 9, 2017 at 15:49 — Claies
– Claies, Commented Sep 9, 2017 at 15:49

kite.js.org · Accepted Answer · 2017-09-09 16:12:50Z

I glanced at the AJAX response data from http://ec2-35-164-0-168.us-west-2.compute.amazonaws.com/panasonic_dubai/_search?q=%2Bdirection%3AIncomming, it's a little complex, the response is successfully set to "$scope.result", your problem is using wrong binding, "id" & "number" is not a property of "result":

{
    "took": 1,
    "timed_out": false,
    "_shards": {
        "total": 5,
        "successful": 5,
        "failed": 0
    },
    "hits": {
        "total": 22,
        "max_score": 0.6931472,
        "hits": [
            {
                "_index": "pbxdata",
                "_type": "panasonic_dubai",
                "_id": "12",
                "_score": 0.6931472,
                "_source": {
                    "ringduration": "0:00",
                    "extension": 105,
                    "strdatetime": "07/12/16 04:55PM ",
                    "callduration": "00:02:08",
                    "message": "07/12/16 04:55PM 105 02 Incomming 043203074 0:00 00:02:08 TR",
                    "trunk": 2,
                    "tags": [
                        "_dateparsefailure"
                    ],
                    "number": 43203074,
                    "@timestamp": "2017-03-07T15:58:02.292Z",
                    "port": 9000,
                    "@version": "1",
                    "host": "127.0.0.1",
                    "calltype": "TR",
                    "direction": "Incomming",
                    "cost": "1.2"
                }
            },
            {
                "_index": "pbxdata",
                "_type": "panasonic_dubai",
                "_id": "9",
                "_score": 0.6931472,
                "_source": {
                    "ringduration": "0:00",
                    "extension": 100,
                    "strdatetime": "07/12/16 04:51PM ",
                    "callduration": "00:04:44",
                    "message": "07/12/16 04:51PM 100 03 Incomming 067315033 0:00 00:04:44 TR",
                    "trunk": 3,
                    "tags": [
                        "_dateparsefailure"
                    ],
                    "number": 67315033,
                    "@timestamp": "2017-03-07T15:56:38.077Z",
                    "port": 9000,
                    "@version": "1",
                    "host": "127.0.0.1",
                    "calltype": "TR",
                    "direction": "Incomming",
                    "cost": "5.2"
                }
            },
            {
                "_index": "pbxdata",
                "_type": "panasonic_dubai",
                "_id": "21",
                "_score": 0.6931472,
                "_source": {
                    "ringduration": "0:00",
                    "extension": 8103,
                    "strdatetime": "07/12/16 04:47PM",
                    "callduration": "00:00:25",
                    "message": "07/12/16 04:47PM 8103 03 Incomming 067315033 0:00 00:00:25 D0",
                    "trunk": 3,
                    "number": 67315033,
                    "@timestamp": "2016-12-07T11:17:00.000Z",
                    "port": 9000,
                    "@version": "1",
                    "host": "127.0.0.1",
                    "calltype": "D0",
                    "direction": "Incomming",
                    "cost": "9"
                }
            },
            {
                "_index": "pbxdata",
                "_type": "panasonic_dubai",
                "_id": "8",
                "_score": 0.6931472,
                "_source": {
                    "ringduration": "0:00",
                    "extension": 8103,
                    "strdatetime": "08/12/16 08:08AM",
                    "callduration": "00:00:20",
                    "message": "08/12/16 08:08AM 8103 02 Incomming 043333099 0:00 00:00:20 D0",
                    "trunk": 2,
                    "number": 43333099,
                    "@timestamp": "2016-12-08T02:38:00.000Z",
                    "port": 9000,
                    "@version": "1",
                    "host": "127.0.0.1",
                    "calltype": "D0",
                    "direction": "Incomming",
                    "cost": "5.4"
                }
            },
            {
                "_index": "pbxdata",
                "_type": "panasonic_dubai",
                "_id": "10",
                "_score": 0.6931472,
                "_source": {
                    "ringduration": "0:00",
                    "number": 65620692,
                    "extension": 8103,
                    "@timestamp": "2016-12-07T11:05:00.000Z",
                    "port": 9000,
                    "@version": "1",
                    "host": "127.0.0.1",
                    "strdatetime": "07/12/16 04:35PM",
                    "message": "07/12/16 04:35PM 8103 02 Incomming 065620692 0:00 AN",
                    "trunk": 2,
                    "calltype": "AN",
                    "direction": "Incomming",
                    "cost": "5.2"
                }
            },
            {
                "_index": "pbxdata",
                "_type": "panasonic_dubai",
                "_id": "14",
                "_score": 0.5753642,
                "_source": {
                    "ringduration": "0:00",
                    "extension": 110,
                    "strdatetime": "07/12/16 04:36PM ",
                    "callduration": "00:00:48",
                    "message": "07/12/16 04:36PM 110 02 Incomming 065620692 0:00 00:00:48 TR",
                    "trunk": 2,
                    "tags": [
                        "_dateparsefailure"
                    ],
                    "number": 65620692,
                    "@timestamp": "2017-03-07T15:55:31.469Z",
                    "port": 9000,
                    "@version": "1",
                    "host": "127.0.0.1",
                    "calltype": "TR",
                    "direction": "Incomming",
                    "cost": "7.2"
                }
            },
            {
                "_index": "pbxdata",
                "_type": "panasonic_dubai",
                "_id": "19",
                "_score": 0.5753642,
                "_source": {
                    "ringduration": "0:00",
                    "extension": 110,
                    "strdatetime": "07/12/16 05:30PM ",
                    "callduration": "00:02:28",
                    "message": "07/12/16 05:30PM 110 02 Incomming 0558244974 0:00 00:02:28 TR",
                    "trunk": 2,
                    "tags": [
                        "_dateparsefailure"
                    ],
                    "number": 558244974,
                    "@timestamp": "2017-03-07T16:01:37.394Z",
                    "port": 9000,
                    "@version": "1",
                    "host": "127.0.0.1",
                    "calltype": "TR",
                    "direction": "Incomming",
                    "cost": "7"
                }
            },
            {
                "_index": "pbxdata",
                "_type": "panasonic_dubai",
                "_id": "22",
                "_score": 0.5753642,
                "_source": {
                    "ringduration": "0:00",
                    "extension": 8103,
                    "strdatetime": "07/12/16 04:13PM",
                    "callduration": "00:00:10",
                    "message": "07/12/16 04:13PM 8103 01 Incomming 042820811 0:00 00:00:10 D0",
                    "trunk": 1,
                    "number": 42820811,
                    "@timestamp": "2016-12-07T10:43:00.000Z",
                    "port": 9000,
                    "@version": "1",
                    "host": "127.0.0.1",
                    "calltype": "D0",
                    "direction": "Incomming",
                    "cost": "9"
                }
            },
            {
                "_index": "pbxdata",
                "_type": "panasonic_dubai",
                "_id": "24",
                "_score": 0.5753642,
                "_source": {
                    "ringduration": "0:00",
                    "number": 67315033,
                    "extension": 8103,
                    "@timestamp": "2016-12-07T11:16:00.000Z",
                    "port": 9000,
                    "@version": "1",
                    "host": "127.0.0.1",
                    "strdatetime": "07/12/16 04:46PM",
                    "message": "07/12/16 04:46PM 8103 03 Incomming 067315033 0:00 AN",
                    "trunk": 3,
                    "calltype": "AN",
                    "direction": "Incomming",
                    "cost": "19"
                }
            },
            {
                "_index": "pbxdata",
                "_type": "panasonic_dubai",
                "_id": "1",
                "_score": 0.5389965,
                "_source": {
                    "ringduration": "0:00",
                    "extension": 8103,
                    "strdatetime": "07/12/16 04:35PM",
                    "callduration": "00:00:27",
                    "message": "07/12/16 04:35PM 8103 02 Incomming 065620692 0:00 00:00:27 D0",
                    "trunk": 2,
                    "number": 65620692,
                    "@timestamp": "2016-12-07T11:05:00.000Z",
                    "port": 9000,
                    "@version": "1",
                    "host": "127.0.0.1",
                    "calltype": "D0",
                    "direction": "Incomming",
                    "cost": "1"
                }
            }
        ]
    }
}

you suppose to out put data from

result.hits.hits

which is an array, where you can get "_id" and "_source.number" for binding, therefore you should use "ngRepeat" directive to loop over an array.

The following code is tested on my local, but it won't work here because stackoverflow is https but AJAX is http.

<!DOCTYPE html>
    <html>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    
    <body>
      <title>demo</title>
      <div ng-app="myApp" ng-controller="myCtrl">
    
        <p>Simple Table</p>
        <table border="1" cellsapcing="5" cellpadding="5" width="400">
          <tr>
            <th>ID</th>
            <th>Number</th>
          </tr>
          <tr ng-repeat="hit in result.hits.hits">
            <td>{{hit._id}}</td>
            <td>{{hit._source.number}}</td>
          </tr>
        </table>
    
        <h3>{{result}}</h3>
    
      </div>
      <script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function ($scope, $http) {
          $http.get(
              "http://ec2-35-164-0-168.us-west-2.compute.amazonaws.com/panasonic_dubai/_search?q=%2Bdirection%3AIncomming"
            )
            .then(function (response) {
                $scope.result = response.data;
              },
              function myError(response) {
                $scope.result = response.statusText;
              });
        });
      </script>
    </body>
    
    </html>

freethinker · Accepted Answer · 2017-09-09 16:11:54Z

0

Look into you response json structure. Try this:

<td ng-repeat="d in result.hits.hits">{{d.id}}</td><td>{{d._source.number}}</td>

answered Sep 9, 2017 at 16:11

freethinker

2,4454 gold badges28 silver badges56 bronze badges

Collectives™ on Stack Overflow

$http.get API response in HTML Table using angular js

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related