Naga Hemanth Naga Hemanth - 3 months ago 9
AngularJS Question

AngularJS is not showing JSON data in list view

I've spent few hours on this and I just can't get the data to display on the page. I'm not getting any errors & I'm able to see the retrieved data in console tool box. Here is my code-

In the html page -

<div class="row">
<div class="col-md-8">
<ul>
<li ng-repeat="menuContent in profileMenu">
<a href="profileMenu/{{menuContent.menuId}}">
{{menuContent.menuItem}}
</a>
</li>
</ul>
</div>
</div>


Inside the .json file -

[{
"menuId":"1",
"menuItem":"About"
},{
"menuId":"2",
"menuItem":"Timeline"
},{
"menuId":"3",
"menuItem":"Teams"
},{
"menuId":"4",
"menuItem":"Liked Profiles"
}]


Inside the JS file -

$http({
method: "get",
url: "data/custom-menu.json"
}).then(function(profileMenuContent){
$scope.profileMenu = profileMenuContent;
console.log($scope.profileMenu.data);
});

Answer

Use the following Code :

$http({
       method: "get",
       url: "data/custom-menu.json"
}).then(function(profileMenuContent){
      $scope.profileMenu = profileMenuContent.data;
      console.log($scope.profileMenu);
});

You are using promise in your service, so it will returned your data in profileMenuContent.data.

Comments