Unable to get data from JSON file in AngularJS

Question

I'm new in angularjs, I'm trying to load data from my JSON file on view. JSON file have some list of lists using li. But does not get showed on my view.

Here is my 'index.html' file

<div id="navbar" class="navbar-collapse collapse">
 <ul class="nav navbar-nav navbar-right">
  <li ng-repeat="item in navbaritem.navigation">
   <a class="{{ item.class }}" href="#" ng-href="{{ item.url }}">{{ item.title }}</a>
  </li>
 </ul>
</div>

Here is my controller.js

(function(){
    var app = angular.module('myapp', []);
    app.controller('mycntrl', function($scope, $http) {
    $scope.navbaritem = [];
    $http.get('pages/navbar.json').success(function(data) {
        $scope.navbaritem = data;

    }, function (err,data) {
        if(err){

            return console.log(err);
        }
        console.log(data);

    });
 }); 
});

Here is my 'pages/navbar.json' file

{
   "general":{
      "logo":"images/logo.jpeg",
      "name" : "Company Name"
   },
   "navigation":[
      {
         "title":"Home",
         "link":"#"
      },
      {
         "title":"About",
         "link":"#"
      },
      {
         "title":"Services",
         "link":"#"
      },
      {
         "title":"Contact",
         "link":"#"
      }
   ]
}

and my output is like this {{item.title}} and also I'm getting the error

Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.6.1/$injector/modulerr?p0=myapp&p1=Error%3A%2…localhost%2Fangular-theme%2Fassets%2Fangularjs%2Fangular.min.js%3A21%3A332)

Welcome to SO. The question title should make clear what the question is about. "please help" is probably the best way to make sure nobody will read the question ;-) — Günter Zöchbauer, May 17 '17 at 10:02
`please help me out i need to submit urgently` -> just like many of us having to work :) — OldPadawan, May 17 '17 at 10:29
this may help you http://stackoverflow.com/questions/18287482/angularjs-1-2-injectormodulerr — Zeromus, May 17 '17 at 10:32

Stephane Janicaud · Answer 1 · 2017-05-17T11:38:33.683

Here is a working example :

Note: As SO snippet editor does not allow additional files, I simulated a $http call in my service with $timeout which also return a promise.

Snippet

(function() {
  'use strict';

  angular.module('app', []);

  angular.
  module('app')
    .controller('ExampleController', ['$scope', 'MyService', function($scope, MyService) {
      // Call service to get navbar items
      MyService.getNavbarItems()
        .then(function(data) {
          // Once promise success, update $scope
          $scope.navbaritem = data;
        });
    }])
    .factory('MyService', ['$timeout', function($timeout) {
      return {
        getNavbarItems: function() {
          // Simulate 250ms $http api call
          // Use return $http.get('/api/navbar/items') in your code
          return $timeout(function() {
            return {
              "general": {
                "logo": "images/logo.jpeg",
                "name": "Company Name"
              },
              "navigation": [{
                  "title": "Home",
                  "link": "/home",
                  "class": "item"
                },
                {
                  "title": "About",
                  "link": "/about"
                },
                {
                  "title": "Services",
                  "link": "/services"
                },
                {
                  "title": "Contact",
                  "link": "/contact"
                }
              ]
            }
          }, 250);
        }
      }
    }])

})();

<!doctype html>
<html lang="en" ng-app="app">

<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.4/angular.min.js"></script>
</head>

<body ng-controller="ExampleController">

  <div id="navbar" class="navbar-collapse collapse">
    <ul class="nav navbar-nav navbar-right">
      <li ng-repeat="item in navbaritem.navigation">
        <a class="{{ item.class }}" href="#" ng-href="{{ item.link }}">{{ item.title }}</a>
      </li>
    </ul>
  </div>

</body>

</html>

Unable to get data from JSON file in AngularJS

1 Answers1