AngularJS Tabelle mit Daten aus REST API

Question

Ich möchte eine Tabelle mit AngularJS anzeigen. Die Datenquelle für die Tabelle ist eine REST-API. Hier ist ein Beispiel Antwort:

{ 
    "value": 43, 
    "C_class": [ 
    1, 
    2, 
    3, 
    4, 
    5, 
    6, 
    7, 
    8, 
    9, 
    10, 
    11, 
    12, 
    13 
    ], 
    "C_name": [ 
    "C_1", 
    "C_2", 
    "C_3", 
    "C_4", 
    "C_5", 
    "C_6", 
    "C_7", 
    "C_8", 
    "C_9", 
    "C_10", 
    "C_11", 
    "C_12", 
    "C_13" 
    ] 
} 

Ich mag unter den Daten in dem Format anzuzeigen:

<tr><td> 1</td><td>C_1<td> 
<td>2<td><td>C_2<td> 
<td>3<td><td>C_3<td> 
<td>4<td><td>C_4<td> 
<td>5<td><td>C_5<td>..... 

ich versucht habe, mit ng-repeat, aber nicht in der Lage zu holen. Danke

<table class="table" border="1" style="width: 100%;" id="detail_table"> 
<tbody><tr ng-repeat="value in tests"> 
<td>{{value.C_name}}</td> 
<td>{{value.C_class}}</td> 
</tr></tbody></table> 

Answer 1

Sie verwenden ng-repeat nicht korrekt. Sie können Hilfe von dem folgenden Code, um Ihre Tabelle anzuzeigen:

<table class="table" border="1" style="width: 100%;" id="detail_table"> 
    <tbody> 
     <tr ng-repeat="value in tests.C_class"> 
      <td ng-bind="tests.C_class[$index]"></td> 
      <td ng-bind="tests.C_name[$index]"></td> 
     </tr> 
    </tbody> 
</table> 

werde ich vorschlagen, dass Sie über die Verwendung von ng-repeat ein wenig studieren.

Verwenden Sie ng-bind anstelle von {{}}. see here

Answer 2

Sie den $ Index in Ihrer ng-Repeat verwenden können (wie durch BABU vorgeschlagen) oder richtig Ihre Daten in ein neues Array umformatieren:

var orgArray = your_data; 

var newArray = []; 
orgArray.C_class.forEach(function (p, i) { 
    newArray.push({ C_class: p, C_name: orgArray.C_name[i] }); 
}); 

und von dort können Sie ng anwenden Wiederholen Sie das neue Array, um die Felder anzuzeigen.

Answer 3

Sie können einfach die beiden in ein anderes Objekt Array hinzufügen ..

var mainObjC = array(); 

C_class.forEach(myFunction); 

var x = 0; 
function myFunction(){ 
    var obj = { 
     C_name : C_name[x], 
     C_class : C_class[x] 
    } 
    x++; 
    mainObjC.push(obj); 
} 

Und würde Ihre HTML

<table class="table" border="1" style="width: 100%;" id="detail_table"> 
<tbody> 
<tr ng-repeat="value in mainObjC"> 
<td>{{value.C_name}}</td> 
<td>{{value.C_class}}</td> 
</tr> 
</tbody> 
</table> 

Answer 4

Das Format der Daten werden zurückgegeben werden von Ihrem API verleihen nicht selbst gut zu dem, was Sie erreichen wollen. Sie müssten Annahmen über die Beziehung der Daten zwischen den beiden Arrays treffen. Eine bessere Struktur würde so aussehen:

[ 
    { 
    "class": 1, 
    "name": "C_1" 
    }, 
    { 
    "class": 2, 
    "name": "C_2" 
    }, 
    { 
    "class": 3, 
    "name": "C_3" 
    }, 
    { 
    "class": 4, 
    "name": "C_4" 
    }, 
    { 
    "class": 5, 
    "name": "C_5" 
    } 
] 

ich eine Geige erstellt haben, die helfen könnten, es die oben genannten Daten verwendet und zeigt eine Tabelle mit den Daten: https://jsfiddle.net/9ypkv77x/

Answer 5

---

Das ist für mich gearbeitet . http://plnkr.co/edit/7gLpeyrtyMgnqtdXDxAu?p=preview

var app = angular.module("myApp", []); 
app.controller("myCtrl", function($scope) { 
$scope.response = { 
    "value": 43, 
    "C_class": [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13], 
    "C_name": [ "C_1", "C_2", "C_3", "C_4", "C_5", "C_6", "C_7", "C_8", "C_9", "C_10", "C_11", "C_12", "C_13"] 
}; 
$scope.c_obj = {}; 
$scope.new_c_obj = {}; 
$scope.c_obj.c_class = $scope.response["C_class"]; 
$scope.c_obj.c_name = $scope.response["C_name"]; 
for($scope.i = 0; $scope.i <= $scope.c_obj.c_class.length-1; $scope.i++){ 
    $scope.new_c_obj[$scope.c_obj.c_class[$scope.i]] = $scope.c_obj.c_name[$scope.i]; 
} 

});