My mind is boggled by this issue, and I have a feeling it's just a simple oversight!
I'm dealing with a service that sends back a JSON object:
[{"accountId":"0000004000006195","title":null,"firstName":"JOE","middleName":"BLOG","lastName":"BLOGGS","suffix":null,"primaryAddress":{"addressLine1":"TEST ADDRESS CLOSE","addressLine2":null,"addressLine3":"MY TOWN","town":"Washington","county":null,"country":"US","postcode":"PO9868"},"customerTelephones":[{"phoneNumber":"09876543455","type":"Alternate 1"},{"phoneNumber":"98654345676","type":"Alternate 2"}],"birthDate":108628400000}]
I'm attempting to display certain properties of the JSON, like first name using:
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.testJson = [{"accountId":"0000004000006195","title":null,"firstName":"JOE","middleName":"BLOG","lastName":"BLOGGS","suffix":null,"primaryAddress":{"addressLine1":"TEST ADDRESS CLOSE","addressLine2":null,"addressLine3":"MY TOWN","town":"Washington","county":null,"country":"US","postcode":"PO9868"},"customerTelephones":[{"phoneNumber":"09876543455","type":"Alternate 1"},{"phoneNumber":"98654345676","type":"Alternate 2"}],"birthDate":108628400000}]
});
HTML:
<p>{{testJson}}</p>
<p>{{testJson.firstName}}</p>
However, inexplicably, {{testJson.firstName}} appears blank!
Check out this Plunker for reference: http://plnkr.co/edit/VWJfcXTPaDut2jqB4W3o?p=preview
Any insights on what might be causing this issue?