I'm trying to read data from a Json file in html using AngularJS, but I'm not getting it. Here is part of the index.html code:
<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>
Follow the JSON code:
{
"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"
}
}
]
}
}
}
}
Finally follow the code of my controller.JS:
var app = angular.module('app', []);
app.controller('HomeCtrl', function($scope, $http) {
$http.get('mock.json').then(function(response) {
$scope.data = response.data;
});
});
I have read some questions but still could not find a solution for the case, and in the documentation I did not get a satisfactory solution for any example for a beginner how I resolve.