Question

我试图使用Quandl restful api和AngularJS创建一个表。虽然表头创建得好，但表格行根本没有填充数据，但只有空行。

这是我的控制器：

angular.module('stockControllers', [])
.controller('stockController', function($scope, $http){
  var results = {};
  $http.get('https://www.quandl.com/api/v3/datasets/WIKI/FB.json?start_date=2017-11-01&api_key=3pg7TVEyogz6D6FXhf5g').
  then(function(response) {
      $scope.resulting = response.data;
      console.log($scope.resulting);
 });
});

HTML code：

<div ng-controller="stockController">

<div class='page-header'>
<h1> {{resulting.dataset.name}} </h1>
<p> Note: showing only OHLC data </p>
</div>

<table class="table table-striped">
    <tr>
        <th>{{resulting.dataset.column_names[0]}}</th>
        <th>{{resulting.dataset.column_names[1]}}</th>
        <th>{{resulting.dataset.column_names[2]}}</th>
    <th>{{resulting.dataset.column_names[3]}}</th>
    <th>{{resulting.dataset.column_names[4]}}</th>
</tr>
<tr ng-repeat="row in resulting.dataset.data">
    <td>{{resulting.dataset.data[row][0]}}</td>
    <td>{{resulting.dataset.data[row][1]}}</td>
    <td>{{resulting.dataset.data[row][2]}}</td>
    <td>{{resulting.dataset.data[row][3]}}</td>
    <td>{{resulting.dataset.data[row][4]}}</td>
</tr>
</table>

</div>

我要使用的api响应片段：

"dataset": {   
"column_names": ["Date","Open","High","Low","Close","Volume","Ex-Dividend","Split Ratio","Adj. Open","Adj. High","Adj. Low","Adj. Close","Adj. Volume"],
"data": [["2017-11-13",
 177.5,
 179.04,
 177.3,
 178.77,
 9431449,
 0,
 1,
 177.5,
 179.04,
 177.3,
 178.77,
 9431449 ],,
[
 "2017-11-10",
 178.35,
 179.0999,
 177.96,
 178.46,
 10933405,
 0,
 1,
 178.35,
 179.0999,
 177.96,
 178.46,
 10933405 ],,

Answer 1

angular.module('app', []).controller('ctrl', function($scope) {
  $scope.resulting = {
    dataset: {
      column_names: ["Date", "Open", "High", "Low", "Close", "Volume", "Ex-Dividend", "Split Ratio", "Adj. Open", "Adj. High", "Adj. Low", "Adj. Close", "Adj. Volume"],
      data: [
        ["2017-11-13",
          177.5,
          179.04,
          177.3,
          178.77,
          9431449,
          0,
          1,
          177.5,
          179.04,
          177.3,
          178.77,
          9431449
        ],
        [
          "2017-11-10",
          178.35,
          179.0999,
          177.96,
          178.46,
          10933405,
          0,
          1,
          178.35,
          179.0999,
          177.96,
          178.46,
          10933405
        ]
      ]
    }
  }
});

table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<table ng-app='app' ng-controller='ctrl'>
  <thead>
    <tr>
      <th ng-repeat='head in resulting.dataset.column_names' ng-if='$index < 5'>{{head}}</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="row in resulting.dataset.data">
      <td ng-repeat='val in row track by $index' ng-if='$index < 5'>{{val}}</td>
    </tr>
  </tbody>
</table>

使用AngularJS和restful api创建动态表

1 个答案: