Erstellen einer dynamischen Tabelle mit AngularJS und restful api

Question

Ich versuche, eine Tabelle mit Quandl erholsamen api zusammen mit AngularJS zu erstellen. Während Tabellenkopfzeilen, die in Tabellenzeilen erstellt wurden, nicht mit Daten gefüllt sind, gibt es nur leere Zeilen.

Hier ist mein Controller:

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> 

Und api Antwort-Fragment, das ich verwenden möchte:

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