使用以下 JSON 更新 HTML table

Question

有人可以查看提到的 Plunker 代码并帮助修改以满足预期 table。

JSON

{
  "PersonEvent": {
    "Body": {
      "Persons": {
        "CurrentPersons": {
          "Service": [
            {
              "-PersonID": "TS029",
              "PersonChangeActivity": "NoChange",
              "Define": {
                "PersonPCProduct": {
                  "-pn": "8000065"
                }
              }
            },
            {
              "-PersonID": "TS023",
              "PersonChangeActivity": "NoChange",
              "Define": {
                "PersonPCProduct": {
                  "-pn": "8000005",
                  "Business": "Voice"
                }
              }
            }
          ]
        },
        "PersonChanges": {
          "PersonInstalls": {
            "Service": [
              {
                "-PersonID": "OT446",
                "PersonChangeActivity": "Install",
                "Define": {
                  "PersonPCProduct": {
                    "-pn": "2411",
                    "Business": "Video"
                  }
                }
              },
              {
                "-PersonID": "VD034",
                "PersonChangeActivity": "Install",
                "Define": {
                  "PersonPCProduct": {
                    "-pn": "2552",
                    "Business": "Video"
                  }
                }
              }
            ]
          },
          "PersonDisconnects": {
            "Service": [
              {
                "-PersonID": "VD034",
                "PersonChangeActivity": "Disconnect",
                "Define": {
                  "PersonPCProduct": {
                    "-pn": "2552",
                    "Business": "Video"
                  }
                }
              },
              {
                "-PersonID": "VP087",
                "PersonChangeActivity": "Disconnect",
                "Define": {
                  "PersonPCProduct": {
                    "-pn": "10400024",
                    "Business": "Video"
                  }
                }
              }
            ]
          }
        }
      }
    }
  }
}

Angular JS

<tr ng-repeat="x in names">                  
              <td ng-repeat="item in x.CurrentPersons.Service">
                 {{item["-PersonID"]}}, {{item.PersonChangeActivity}} <br>
                </td>
                <td ng-repeat="name in x.PersonChanges.PersonInstalls.Service">
                 {{name["-PersonID"]}},{{name.PersonChangeActivity}},{{name.Define.PersonPCProduct["-pn"]}} <br>
                </td>
                 <td ng-repeat="disconnect in x.PersonChanges.PersonDisconnects.Service">
                 {{disconnect["-PersonID"]}},{{disconnect.PersonChangeActivity}},{{disconnect.Define.PersonPCProduct["-pn"]}} <br>
                </td>
            </tr>

实际Table我在上面使用AngularJS

This what has been Tried

预计HTMLTable

Demo using Plunker

Answer 1

我只是更改了显示 ng-repeat 的位置以获得预期的输出。

这里是更新后的 plunker.

<tr ng-repeat="x in names">            
  <td>
    <span ng-repeat="item in x.CurrentPersons.Service">
     {{item["-PersonID"]}}, {{item.PersonChangeActivity}},{{item.Define.PersonPCProduct["-pn"]}} 
     <br>
    </span>
  </td>
  <td>
    <span ng-repeat="name in x.PersonChanges.PersonInstalls.Service">
     {{name["-PersonID"]}},{{name.PersonChangeActivity}},{{name.Define.PersonPCProduct["-pn"]}} <br>
    </span>
  </td>
   <td>
     <span ng-repeat="disconnect in x.PersonChanges.PersonDisconnects.Service">
       {{disconnect["-PersonID"]}},{{disconnect.PersonChangeActivity}},{{disconnect.Define.PersonPCProduct["-pn"]}} <br>
     </span>
  </td>
</tr>

使用以下 JSON 更新 HTML table

Updating the HTML table using below JSON

json

angularjs

plunker

angularjs-ng-repeat