When you are developing REST API on server side, you sometimes want to have a page that renders JSON data in a bit nice way than a row JSON view (that most browsers do good job rendering, but still somewhat hard to read)
To render JSON data in a simple HTML table (or whatever) format with minimum AngularJS coding, here is how.
JSON Data
Let's say, you have a JSON data (this is from AngularJS Tutorial) available from a controller ("C" part of MVC)function PhoneListCtrl($scope) {
$scope.phones = [
{
"name": "Nexus S",
"snippet": "Fast just got faster with Nexus S.",
"age": 0},
{
"name": "Motorola XOOM with Wi-Fi",
"snippet": "The Next, Next Generation tablet.",
"age": 1},
{
"name": "MOTOROLA XOOM",
"snippet": "The Next, Next Generation tablet.",
"age": 2}
];
}
HTML markup
...with AngularJS expressions. Note the expression "(key, value) in phone" below. (By the way, this is "V" part of MVC, and "phones" data is the "M" part, just for the sake of completeness!)<h1>Phones</h1
<div ng-repeat="phone in phones">
<h2>{{phone.name}}</h2>
<table border="1px">
<tr ng-repeat="(key,value) in phone">
<td>{{key}}</td>
<td>{{value}}</td>
</tr>
</table>
</div>
</div>
Result
Phones
Nexus S
| age | 0 |
| name | Nexus S |
| snippet | Fast just got faster with Nexus S. |
Motorola XOOM with Wi-Fi
| age | 1 |
| name | Motorola XOOM with Wi-Fi |
| snippet | The Next, Next Generation tablet. |
MOTOROLA XOOM
| age | 2 |
| name | MOTOROLA XOOM |
| snippet | The Next, Next Generation tablet. |
