Batman Batman - 2 months ago 22
JSON Question

Json to HTML Table Convert using AngularJS Ng-repeat

Can anyone help me in coming up with HTML table for JSON using Angular JS Ng-Repeat (Please see the HTML table format as below)

Assuming Angular JS get the JSON from a file and Object will be PersonEvents

so I will use list in PersonEvents in AngulaJS view

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


Expected HTML Table

<table>
<tr>
<th>Current Persons<br></th>
<th>PersonInstalls</th>
<th>PersonDisconnects</th>
</tr>
<tr>
<td>TS029,NoChange,8000065<br>TS023,NoChange,8000005</td>
<td>OT446,Install,2411<br>VD034,Install,2552</td>
<td>VD034,Disconnect,2552<br>VP087,Disconnect,10400024</td>
</tr>
</table>

Answer

You can do this,

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

DEMO