ng-repeat JSON object
http://angularjs.org/
HTML
<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<div ng-controller="MyCtrl">
<!-- This code works. By looping through each collection, I can access each Prompt value individually -->
List of Prompts using multiple loops
<div ng-repeat="(k, v) in template">
<div ng-repeat="(x, y) in v">
<div ng-repeat="(z, j) in y">
<div ng-repeat="vv in j">
{{vv.Prompt}}
</div>
</div>
</div>
</div>
<br />
<br />
<!-- It seems like there should be a way to access the object in Field directly using point notation -->
List of Prompts using point notation
<div ng-repeat="item in template.Fields.Field">
{{item.Prompt}}
</div>
</div>
CSS
body {
padding: 10px;
}
JavaScript
var myApp = angular.module('myApp', []);
function MyCtrl($scope) {
var jsonString = '{"Template":{"Parameters":{"Name":"Test","Version":"1.0"},"Fields":{"Field":[{"Prompt":"Last Name:"},{"Prompt":"First Name:"},{"Prompt":"Middle Name"},{"Prompt":"ID Number:"}]},"Captures":{"Capture":[{"Prompt":"Picture"},{"Prompt":"Picture from file"},{"Prompt":"Signature"}]}}}';
var template = JSON.parse(jsonString);
console.log(template);
$scope.template = template;
}
// Here is the JSON Object in a more human readable form
/*
{
"Template": {
"Parameters": {
"Name": "Test",
"Version": "1.0"
},
"Fields": {
"Field": [
{
"Prompt": "&Last Name:"
},
{
"Prompt": "&First Name:"
},
{
"Prompt": "&Middle Name"
},
{
"Prompt": "&ID Number:"
}
]
},
"Captures": {
"Capture": [
{
"Prompt": "Picture"
},
{
"Prompt": "Picture from file"
},
{
"Prompt": "Signature"
}
]
}
}
}
*/