Search code examples
angularjsjsonangularjs-ng-repeatplunker

Updating the HTML table using below JSON


Can someone look into the Plunker code mentioned and help in modifying to meet the expected 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>

Actual Table I am getting using above AngularJS

This what has been Tried

Expected HTML Table

Demo using Plunker


Solution

  • I just changed where the ng-repeat is displayed to achieve the expected output.

    Here the the updated 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>