使用Angularjs ng repeat解析嵌套Json并将元素显示到html表中

坦率地说，我对安格拉斯是新来的，我正在学习一些事情。我被这件事困住了，如果有人能给我一些指导，我将不胜感激

我有一个类似这样的JSON响应：

{
    "id": "57fc5f56e40a93f2e0ae9541",
    "name": "ui-frmsintegration",
    "testCases": [
      {
        "testScenarioId": "57fc0872febe366d8c6d4f61",
        "date": "2017-01-26T11:42:58Z",
        "status": "failed",
        "testCase": "(HAT-5534) Email and SMS and null values - sms_upsert_uncheck_20150520.csv",
        "ctestCases": [
          {
            "testScenarioId": "58234352f033f0477d930cf6",
            "date": "NA",
            "status": "NA",
            "testCase": "(HAT-5534) Email and SMS and null values - sms_upsert_uncheck_20150520.csv"
          }
        ]
      },
      {
        "testScenarioId": "581a04a3dfa8c3dffae991f4",
        "date": "2017-01-26T11:31:08Z",
        "status": "inprogress",
        "testCase": "(HAT-5530) Malformed record with invalid escape character",
        "ctestCases": [
          {
            "testScenarioId": "58237716f033f0477d930d0a",
            "date": "NA",
            "status": "NA",
            "testCase": "(HAT-5530) Malformed record with invalid escape character"
          }
        ]
      }
}

我的要求是删减这个嵌套的JSON，并将所有元素添加到具有多行的单个表中。因此，如果将上述响应具体化为一个表，最终输出将如下所示：

{
    "id": "57fc5f56e40a93f2e0ae9541",
    "name": "ui-frmsintegration",
    "testCases": [
      {
        "testScenarioId": "57fc0872febe366d8c6d4f61",
        "date": "2017-01-26T11:42:58Z",
        "status": "failed",
        "testCase": "(HAT-5534) Email and SMS and null values - sms_upsert_uncheck_20150520.csv",
        "ctestCases": [
          {
            "testScenarioId": "58234352f033f0477d930cf6",
            "date": "NA",
            "status": "NA",
            "testCase": "(HAT-5534) Email and SMS and null values - sms_upsert_uncheck_20150520.csv"
          }
        ]
      },
      {
        "testScenarioId": "581a04a3dfa8c3dffae991f4",
        "date": "2017-01-26T11:31:08Z",
        "status": "inprogress",
        "testCase": "(HAT-5530) Malformed record with invalid escape character",
        "ctestCases": [
          {
            "testScenarioId": "58237716f033f0477d930d0a",
            "date": "NA",
            "status": "NA",
            "testCase": "(HAT-5530) Malformed record with invalid escape character"
          }
        ]
      }
}

57fc0872febe366d8c6d4f61失败

58234352f033f0477d930cf6 NA

581a04a3dfa8c3dffae991f4正在进行

58237716f033f0477d930d0a不适用

---

因此，基本上，它将从父Id和状态开始，列出arraylist对象“ctestCases”下存在的所有子Id和状态，然后继续到下一个父Id和状态，直到整个响应耗尽。

这就是如何使用嵌套的ng重复执行您所要求的操作。我使用了一个来使用第一个ng repeat，然后将嵌套数组的第二个ng repeat放在

    <table class="table table-bordered">
        <thead>
          <tr>
            <th>Name</th>
            <th>Status</th>    
          </tr>
        </thead>
        <tbody ng-repeat="item in data.testCases">
          <tr>
            <td>{{item.testScenarioId}}</td>
            <td>{{item.status}}<td>
          </tr>
          <tr ng-if="item.ctestCases && item.ctestCases.length" ng-repeat-start="nItem in item.ctestCases">
            <td>{{nItem.testScenarioId}}</td>
            <td>{{nItem.status}}</td>
          </tr>
          <tr ng-if="nItem.dtestCases && nItem.dtestCases.length" ng-repeat="dItem in nItem.dtestCases" ng-repeat-end>
            <td>{{dItem.testScenarioId}}</td>
            <td>{{dItem.status}}</td>
          </tr>
        </tbody>
      </table>

名称
地位
{{item.testScenarioId}
{{item.status}
{{nItem.testScenarioId}
{{nItem.status}
{{dItem.testScenarioId}
{{dItem.status}

下面是CodePen的工作示例。今后我要求你至少尝试解决这个问题。如果您确实试图解决问题，您应该发布代码，以便其他人可以帮助纠正您所做的事情。

---

我认为您需要首先验证json，然后添加更新的json源。@alphapilgrim:谢谢您的关注。但我不确定我是否理解你的问题。请你再详细一点好吗？你所包含的json文件无效，有些内容不正确。缺少/额外的括号。一旦有效，我/某人就可以给你迭代数据的确切方法。@alphapilgrim:找到你了：）。我将添加正确的JSON。关于使用

ng repeat

的任何教程都将向您展示如何做到这一点。Stackoverflow既不是免费的代码编写服务，也不是教程服务。非常感谢@Michael，这真的很有帮助。我想知道，如果我必须再往下挖掘一个层次（比如ctestCases现在会有一个say dtestCases数组），那么我需要添加以下内容：{{cItem.testScenarioId}{{cItem.status}}要添加另一个层次，您需要在第一个层次使用ng repeat start和repeat。然后，您可以向上一个示例中的嵌套行添加具有类似代码的附加行。在这个新版本中，您需要添加ng repeat end。我更新了代码笔，添加了一个额外的嵌套列表。太棒了！这很有魅力。非常感谢迈克尔-你救了我一天！