Estou tentando ler os dados de um arquivo Json no html usando AngularJS, porém não estou conseguindo.
Segue parte do código da index.html:
<div ng-app="app">
<div class="page-header" id="principal" ng-controller="HomeCtrl">
<div class="divpai" style="width:950px; height: 734px; background-color:#F3E10A" align="center">
<table class="tclass">
<tr>
<td style="text-align: center;">
<button id="btf1" ng-repeat="menus in mock(0,4)" class="btf" style="width:416px; height: 79px; background-color:#2E5491">{{response.id}}</button>
</td>
<td style="text-align: center;">
<button id="btf5" ng-repeat="menus in mock(4,8)" class="btf" style="width:416px; height: 79px; background-color:#2E5491">{{response.id}}</button>
</td>
</tr>
</table>
</div>
</div>
</div>
Segue código do JSON:
{
"alexa": {
"#text": "",
"item": {
"@attributes": {
"name": "MenuPrincipal",
"label": "Menu Principal"
},
"#text": "",
"children": {
"#text": "",
"child": [{
"@attributes": {
"id": "mnu1"
}
},
{
"@attributes": {
"id": "mnu2"
}
},
{
"@attributes": {
"id": "mnu3"
}
},
{
"@attributes": {
"id": "mnu4"
}
},
{
"@attributes": {
"id": "mnu5"
}
},
{
"@attributes": {
"id": "mnu6"
}
},
{
"@attributes": {
"id": "mnu7"
}
},
{
"@attributes": {
"id": "mnu8"
}
}
]
}
}
}
}
Por fim segue o código da minha controller.JS:
var app = angular.module('app', []);
app.controller('HomeCtrl', function($scope, $http) {
$http.get('mock.json').then(function(response) {
$scope.data = response.data;
});
});
Já li algumas perguntas porém ainda não consegui encontrar uma solução para o caso, e na documentação não consegui uma solução satisfatória nenhum exemplo para um iniciante como eu resolver.