Question

您好我有一个AngularJS应用程序。我正在连接到服务器并获取一些JSON数组数据。它是动态数据，我不确定内容是如何的。

我想将其显示为表格。这就是我的JSON的样子。

回应1

{
  "success": true,
  "statusMessage": null,
  "responseObject": {
    "sourceContent": {
      "Classification": [
        "New Feature",
        "Bug",
        "Bug",
        "Improvement",
        "Improvement"
      ],
      "CriticalityCode": [
        "2",
        "1",
        "4",
        "6",
        "9"
      ],
      "Title": [
        "TITLE1",
        "TITLE2",
        "TITLE3",
        "TITLE4",
        "TITLE5"
      ],
      "Description": [
        "Description 1",
        "Description 2",
        "Description 3",
        "Description 4",
        "Description 5"
      ],
      "Priority": [
        "Major",
        "Major",
        "Critical",
        "Critical",
        "Major"
      ],
      "Type": [
        "type 1",
        "type 2",
        "type 3",
        "type 4",
        "type 5"
      ],
      "Date": [
        "2014-01-06T11:30:10.000+0000",
        "2013-12-30T11:14:27.000+0000",
        "2013-12-09T10:21:09.000+0000",
        "2013-12-05T08:12:07.000+0000",
        "2013-12-05T08:05:46.000+0000"
      ]
    }
  }
}

回复2

{
  "success": true,
  "statusMessage": null,
  "responseObject": {
    "sourceContent": {
      "Requirements": [
        "Requirements 1",
        "Requirements 2",
        "Requirements 3",
        "Requirements 4"
      ],
      "Req Key": [
        "2",
        "1",
        "6",
        "9"
      ],
      "Description": [
        "Description 1",
        "Description 2",
        "Description 3",
        "Description 4"
      ],
      "Type": [
        "type 1",
        "type 2",
        "type 3",
        "type 4"
      ],
      "Date": [
        "2013-12-30T11:14:27.000+0000",
        "2013-12-09T10:21:09.000+0000",
        "2013-12-05T08:12:07.000+0000",
        "2013-12-05T08:05:46.000+0000"
      ]
    }
  }
}

JS Code。

$scope.sourceContent= $scope.response.responseObject.sourceContent;

我不知道如何把表内容。这是我的HTML

<table class="table-bordered" style="margin-bottom: 0;">
              <tr>
                  <th class="border" ng-repeat="(header, value) in sourceContent">{{header}}</th>
              </tr>
              <tr>
                  <td class="border" >
                      {{sourceContent.Classification[0]}}
                  </td>
              </tr>
    </table>

我可以设置表列标题。但是如何设置内容？

JSFiddle Link

Answer 1

我不知道您是否控制了回复的来源，或者您可能必须在收到回复后处理回复，来自：

{
  Requirements: [],
  Description: []
}

到

[
  {Requirements: '', Description: ''},
  {Requirements: '', Description: ''},
  { ... }
]

此时您可以使用ngRepeat轻松填充表格。

对于将第一个转换为第二个的示例代码：

var responseArray = [];
for (var key in response) {
  var keyArray = response[key];
  for (var i = 0; i < keyArray.length; i++) {
      if (responseArray.length - 1 < i) {
        var obj = {};
        obj[key] = keyArray[i];
        responseArray.push(obj);
      } else {
        var responseElement = responseArray[i];
        responseElement[key] = keyArray[i];
      }
  }
}

我还没有对上面的代码进行过测试（在SO编辑器中写过它;）），但我希望这能让我们了解如何实现转换。

使用AngularJS显示动态JSON数组

1 个答案: