JSON output to AngularJS parsejson - php

Question

I cannot seem to put these into a scope.. And not sure if im doing something wrong...
HTML:
<div class="col-md-10 pull-md-left" style=" width:102%;">
<div class="row">
<span style="text-decoration:underline;">EC2 Instances</span> <span style="clear:both;">refresh</span>
<table class="table-striped" style="width:100%;border:1px solid gray;">
<thead>
<tr style="border-bottom:1px solid black; background-color:black; color:white;">
<th title="ID" style="width:20px;">#</th>
<th title="Customer Attached">Customer</th>
<th title="Instance Name">Name</th>
<th title="Instance ID">ID</th>
<th title="Instance Type">Type</th>
<th title="Instance Availability Zone">Zone</th>
<th title="This is Title">State</th>
<th title="Public DNS">WAN_DNS</th>
<th title="Public IP">WAN_IP</th>
<th title="What Instasnce Was Booted Up">Started</th>
<th title="Security Groups">Security</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="ec2 in servers">
<td>{{ $index + 1 }}</td>
<td>{{ customerID }}</td>
<td>{{ instancename }}</td>
<td>{{ ec2.instanceID }}</td>
<td>{{ ec2.instanceType }}</td>
<td>{{ ec2.instanceAvailabilityZone }}</td>
<td>{{ ec2.instanceState }}</td>
<td>{{ ec2.publicdns }}</td>
<td>{{ ec2.publicip }}</td>
<td>{{ ec2.startdate }}</td>
<td>{{ ec2.secgroup }}</td>
</tr>
<tr ng-show="!ec2.length">
<td colspan="11" style="text-align:center;">
<BR>
No Instances have been syncronized.
<BR>
<BR>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
CONTROLLER:
<script>
var app = angular.module('myApp', []);
app.controller('ec2instanceCtrl', function($scope, $http) {
console.log('a test');
$http.get("ec2instances.php")
.then(function (response) {
$scope.servers = JSON.parse(response.data);
//$scope.servers = response.data.records;
$scope.servers = results[0].ec2instance.map;
}
);
});
JSON:
{
"ec2instance": [{
"ID": 0,
"customerID": null,
"ec2.instancename": "domain1.host",
"ec2.instanceID": "i...",
"ec2.instanceType": "x3large",
"ec2.instanceAvailabilityZone": "us-east-1a",
"ec2.instanceState": "running",
"ec2.publicdns": "..com",
"ec2.publicip": "127.0.0.1",
"ec2.startdate": "11\/25\/2016 1:30AM",
"ec2.secgroup": "open.ports"
}, {
"ID": 1,
"customerID": 2,
"ec2.instancename": "server.com",
"ec2.instanceID": "i2",
"ec2.instanceType": "x5large",
"ec2.instanceAvailabilityZone": "us-east-2c",
"ec2.instanceState": "running",
"ec2.publicdns": ".com",
"ec2.publicip": "125.5.5.5",
"ec2.startdate": "11\/1\/15 1:00am",
"ec2.secgroup": "all"
}]
}
Now just trying to figure out the results and why it's not populating.... I am having no luck, is it because the JSON isnt properly formatted? Or am I not setting the scope correct?
Any help much appreciated!

Answer 1

Do $scope.servers = JSON.parse(response.data).ec2instance, then $scope.servers should be an array containing your servers.
Assuming the parsed data is ok (try console.log($scope.servers) after the JSON.parse line), use the following notation in your ng-repeat instead:
<tr ng-repeat="s in servers">
<td>{{ $index + 1 }}</td>
<td>{{ s.customerID }}</td>
<td>{{ s.instancename }}</td>
<td>{{ s['ec2.instanceID'] }}</td>
<td>{{ s['ec2.instanceType'] }}</td>
<td>{{ s['ec2.instanceAvailabilityZone'] }}</td>
<td>{{ s['ec2.instanceState'] }}</td>
<td>{{ s['ec2.publicdns'] }}</td>
<td>{{ s['ec2.publicip'] }}</td>
<td>{{ s['ec2.startdate'] }}</td>
<td>{{ s['ec2.secgroup'] }}</td>
</tr>