AngularJS 및 편안한 api를 사용하여 동적 테이블 만들기

Question

AngularJS와 함께 Quandl 편안한 API를 사용하여 테이블을 만들려고합니다. 테이블 헤더가 잘 작성된 테이블 행은 데이터로 전혀 채워지지 않지만 빈 행만 있습니다. 여기

내 컨트롤러 :

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 코드 :

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