JSON output to AngularJS parsejson

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>