Iterating over JSON properties - angularjs

Question

I have successfully used the $http service in angular to pull a JSON object from another server using their API. I was able to then display the values like so...
<div ng-controller="ApiController as ApiCtrl">
{{ApiCtrl.Api.status}}
{{ApiCtrl.Api.meta.count}}
{{ApiCtrl.Api.data[0].nickname}}
{{ApiCtrl.Api.data[0].account_id}}
</div>
This displays the values correctly but I am unable to display the Keys. I read around, here and here. They explained that there is an ng-repeat that is set up to iterate through an object and pull the keys and values from it.
<div ng-controller="ApiController as ApiCtrl">
<div>
<div ng-repeat="(key, value) in Api">
{{key}} : {{value}}
</div>
</div>
</div>
For reference this is the ApiController
function ApiController($http) {
var vm = this;
vm.Api = [];
$http.get('...').success(function (data) {
vm.Api = data;
});
};
This is the Json that I requested
{
"status": "ok",
"meta": {
"count": 1
},
"data": [
{
"nickname": "Mitcha47",
"account_id": 1001356515
}
]
}
The second method ng-repeat="(key, value) in Api" does not work and only shows * ngRepeat: (key, value) in Api * in the html
Im quite confused about why it doesn't work and am not sure if its an incorrect use of syntax or from not understanding how the ng-repeat fully works.
Edit
After changing to div ng-repeat="(key,value) in ApiCtrl.Api" This was produced ->
status : ok
meta : {"count":1}
data : [{"nickname":"Mitcha47","account_id":1001356515}]'
Which is okay, but not exactly the format to put into a table, which is the next step. Would this be fixed by using the .fromJson function?
Do i include the ApiCtrl because multiple controllers can be used in each module and thus this keeps everything pointing to the correct values?

Answer 1

You need to specify the controller in your ng-repeat.
EDIT
According to the docs, when you use the controller as declaration methods and properties are bound directly to the controller instead of using $scope hence why you need to specify the controller because the Api object is a property of that controller.
I've changed the snippet to show the data in a table but I am unsure exactly what you want to display. Could you please provide an example?
<div ng-repeat="(key, value) in ApiCtrl.Api">
angular.module("app", [])
.controller("ApiController", ApiController);
function ApiController($http) {
var vm = this;
vm.Api = {
status: "good",
meta: {
count: 42
},
data: [{
nickname: "Timmy",
account_id: 1
}, {
nickname: "Johnny",
account_id: 2
}]
};
};
table {
border-collapse: collapse;
}
th,
td {
border: 1px solid black;
padding: 5px;
}
th {
text-align: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="ApiController as ApiCtrl">
{{ApiCtrl.Api.status}} {{ApiCtrl.Api.meta.count}} {{ApiCtrl.Api.data[0].nickname}} {{ApiCtrl.Api.data[0].account_id}}
</div>
<hr>
<div ng-controller="ApiController as ApiCtrl">
<div>
<table>
<thead>
<tr>
<th ng-repeat="(key, value) in ApiCtrl.Api">{{key}}</th>
</tr>
</thead>
<tbody>
<td ng-repeat="(key, value) in ApiCtrl.Api">
{{value}}
</td>
</tbody>
</table>
</div>
</div>
</div>

Answer 2

Possible problem can be here:
It should be -
<div ng-repeat="(key, value) in ApiCtrl.Api">
{{key}} : {{value}}
</div>
Instead of -
<div ng-repeat="(key, value) in Api">
{{key}} : {{value}}
</div>

Answer 3

If you use the controller as syntax, you have to use
ng-repeat="(key, value) in ApiCtrl.Api"