I have set up a navigation bar using JSON data fetched by an Angular service. Everything is working fine with my service and controller, but I am facing difficulty in displaying the nested JSON data in my view. Here is the JSON data:
{
"menu": [
{
"name": "Electronics",
"link": "1",
"sub": [
{
"name": "Mobiles",
"link": "1.1",
"sub": [
{
"name": "Samsung",
"link": "1.1.1",
"sub": null
},
{
"name": "Apple",
"link": "1.1.2",
"sub": null
},
...
]
},
...
]
},
...
]
}
I can successfully see all the data in the console, but need assistance with rendering the data in the view using ng-repeat.
For your reference, here is the controller and Factory code: Factory:
( function ()
{
angular.module( "myApp" )
.factory( "navService", function ( $http )
{
function getNavItems()
{
return $http.get( '../data/navData.json' );
};
return {
getNavItems: getNavItems
};
} );
}()
Controller:
( function ()
{
angular.module( "myApp" )
.controller( "NavController", function ( $scope, $http, navService )
{
navService.getNavItems().then( function ( menu )
{
$scope.menu = menu.data;
console.log( menu.data );
} );
} );
} ());
Any help would be appreciated. Thank you.