$ http.get角度jsを使用したHTMLテーブルのAPIレスポンス

URLのデータをHTMLテーブルにバインドします。しかし私はそれを表示することはできません。 HTMLテーブルの下にバインドすることができます。しかし、HTMLテーブルはAPIからのデータを表示していません。あなたはJSON構造をレスポンスに

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>

出典

2017-09-09 vinu prasad

あなたは 'result'を反復処理するために' NG-repeat'を必要としています。 – Claies

ルック：

は、ここに私のコードです。これを試してみてください：

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

出典

2017-09-09 16:11:54

私はhttp://ec2-35-164-0-168.us-west-2.compute.amazonaws.com/panasonic_dubai/_search?q=%2Bdirection%3AIncommingからAJAXの応答データをちらっと見た、それは少し複雑ですが、応答が正常にあなたの問題は間違っているバインディング、「ID」&を使用している、「$のscope.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" 
       } 
      } 
     ] 
    } 
}

あなたが出て

result.hits.hits
からデータを置くと仮定します

（配列の場合は "_id"と "_source.number"を得ることができるため、配列をループするには "ngRepeat"ディレクティブを使用する必要があります）。

次のコードはローカルでテストされていますが、stackoverflowがhttpsでAJAXが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>

出典

2017-09-09 16:12:50

うわー！本当に働いています...ありがとう –

$ http.get角度jsを使用したHTMLテーブルのAPIレスポンス

答えて

関連する問題