How to print data in Tabular format from this given JSON - angularjs

Question

I am trying to print the data under tabular format .
The data which is present under "properties" (ApprovalStatusShrtStrngVal and FluidCodeShrtStrngVal)
I have tried as
<div ng-app="myapp" ng-controller="FirstCtrl">
<table border="1">
<tr>
<th ng-repeat="(key, val) in collectioninfo.records.properties">{{ key }}</th>
</tr>
<tr ng-repeat="row in collectioninfo">
<td ng-repeat="column in row">
{{ column }}
</td>
</tr>
</table>
</div>
JSON is
{
"records": [{
"keys": ["n"],
"length": 1,
"_fields": [{
"identity": {
"low": 1128,
"high": 0
},
"labels": ["TestLabel"],
"properties": {
"ApprovalStatusShrtStrngVal": "Working",
"FluidCodeShrtStrngVal": "P"
}
}],
"_fieldLookup": {
"n": 0
}
}, {
"keys": ["n"],
"length": 1,
"_fields": [{
"identity": {
"low": 1129,
"high": 0
},
"labels": ["TestLabel"],
"properties": {
"ApprovalStatusShrtStrngVal": "Working",
"FluidCodeShrtStrngVal": "P"
}
}],
"_fieldLookup": {
"n": 0
}
}],
"summary": {
"statement": {
"text": "MATCH (n:TestLabel) RETURN n LIMIT 25",
"parameters": {}
},
"statementType": "r",
"counters": {
"_stats": {
"constraintsRemoved": 0
}
},
"updateStatistics": {
"_stats": {
"constraintsRemoved": 0
}
},
"plan": false,
"profile": false,
"notifications": [],
"server": {
"address": "localhost:7687",
"version": "Neo4j/3.2.0"
},
"resultConsumedAfter": {
"low": 37,
"high": 0
},
"resultAvailableAfter": {
"low": 3,
"high": 0
}
}
}
http://jsfiddle.net/9fR23/498/
please let me know how to fix this
ApprovalStatusShrtStrngVal FluidCodeShrtStrngVal (Header)
Working P (Values)

Answer 1

You have to loop through your array properly to get the desired result.
<table border="1">
<tr>
<th ng-repeat="(key, val) in collectioninfo.records[0]._fields[0].properties">{{ key }}</th>
</tr>
<tr ng-repeat="row in collectioninfo.records">
<td ng-repeat="column in row._fields[0].properties">
{{ column }}
</td>
</tr>
</table>
Working Fiddle :http://jsfiddle.net/9fR23/499/