AngularJS 表使用来自 REST API 的数据答案

【问题标题】：AngularJS table using data from REST APIAngularJS 表使用来自 REST API 的数据
【发布时间】：2016-10-09 18:57:07
【问题描述】：

我想使用 AngularJS 显示一个表格。该表的数据源将是一个 REST API。这是一个示例响应：

{
  "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"
  ]
}

我想按以下格式显示数据：

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

我尝试使用ng-repeat，但无法获取。谢谢

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

【问题讨论】：

找到你的解决方案@Aksaya？
是的，我明白了...谢谢

标签： html arrays angularjs

【解决方案1】：

您没有以正确的方式使用ng-repeat。您可以从以下代码中获取帮助来显示您的表格：

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

我建议你学习一下使用ng-repeat。

尝试使用ng-bind 而不是{{}}。 see here

【讨论】：

【解决方案2】：

这对我有用。 http://plnkr.co/edit/7gLpeyrtyMgnqtdXDxAu?p=preview

<body ng-controller="myCtrl">
<div class="container">
  <table class="table table-striped" style="height: 100px; width: 100px;">
      <tr ng-repeat="(key,value) in new_c_obj">
        <td>{{key}}</td>
        <td>{{value}}</td>
      </tr>
  </table>
</div>

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];
}

});

【讨论】：

【解决方案3】：

您可以在 ng-repeat 中使用 $index（如 B.A.B.U 建议的那样）或将数据重新格式化为新数组：

var orgArray = your_data;

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

然后您可以在新数组上应用 ng-repeat 以显示字段。

【讨论】：

【解决方案4】：

您可以简单地将这两个添加到另一个对象数组中..

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);
}

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

【讨论】：

【解决方案5】：

从您的 API 返回的数据格式不适合您想要实现的目标。您必须对两个数组之间的数据关系做出假设。更好的结构是这样的：

[
  {
    "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"
  }
]

我创建了一个可能有帮助的小提琴，它使用上述数据并显示一个包含数据的表格：https://jsfiddle.net/9ypkv77x/

【讨论】：