Ng-repeat is not showing data coming from config.js

Question

html:

<ul>
    <li><a>cakes</a></li>
    <li ng-repeat="menu in menuItems">
        <a>{{menu}}</a>
    </li>
</ul>

Js:

$http.get('resources/config.js').then(function (data) {
    $scope.menuBar = data.menuBar;
    var menuItems = [];
    menuItems = $scope.menuBar;
    console.log(menuItems);
  });

config.js:

data = {
    logo : 'My App',
    menuBar : ["Cakes", "Chocolates","Flowers", "Toys", "Special Gifts"],
    view : ["#cake","#chocolates","#flowers","#toys", "#gifts"]
}

I am new to angular js. I am trying to pull data from config file which has menu items defined under menuBar.

I want to display all items in ul-li format. But somehow its not working.Can anyone help me in this.

score 0 · Answer 1 · answered Feb 12 '16 at 22:52

0

You need to populate $scope.menuItems which is the name you are using in your template.

answered Feb 12 '16 at 22:52

DenizEng

400
4
14

I don't understand. Can you explain me in little bit detail. – Pallavi Feb 12 '16 at 23:01
In html template, you are iterating over items in menuItem. So you'd need to set menuItem property of scope, to be able to use it in your view. The fact that my or other answerer's suggestion didn't work probably means that your code is not bound to the template. Here is an example: http://www.w3schools.com/angular/angular_controllers.asp. – DenizEng Feb 12 '16 at 23:05
yeah I tried according to tutorial but again its not working. – Pallavi Feb 12 '16 at 23:25

score 0 · Answer 2 · answered Feb 12 '16 at 22:56

0

The array you go over in ng-repeat must be defined over a scope, therefore in order for angular to know what "menuItems" is, it must be defined as a cope.

Try changing the ng-repeat to "menu in menuBar", or in your JS change menuBar to menuItems.

answered Feb 12 '16 at 22:56

OmerM25

243
2
13

I tried both the way but its not working.and no error is also coming. – Pallavi Feb 12 '16 at 23:02
config.js is invalid json. Remove the "data =" from the beginning. – DenizEng Feb 12 '16 at 23:30
Here is a full working example. https://plnkr.co/edit/ybEcq60iRy2zkdbWL6L4?p=preview Make sure you validate your json using one of the many online tools you can find. For example you were using single quotes instead of double. – DenizEng Feb 12 '16 at 23:42
actually config.js is not a json. I am trying to remove hardcode data from my main code and trying to pull these property data instaed of that hardcord data. i refering an example from here http://stackoverflow.com/questions/19310951/how-to-read-a-properties-file-in-javascript-from-project-directory – Pallavi Feb 12 '16 at 23:52

score 0 · Answer 3 · answered Feb 12 '16 at 23:35

It should be

$scope.menuItems = $scope.menuBar;

You have

menuItems = $scope.menuBar;

Unless there's a specific reason to have $scope.menuBar, you can just skip it and go directly with:

 $http.get('resources/config.js').then(function (data) {
        var menuItems = [];
        $scope.menuItems = data.menuBar;
 });

Not sure of the, ahem -- scope -- of your app ;) but if it's anything beyond super simple, you will want to use a Service for the data so you give access to the data to multiple controllers by injecting it as a dependency, for example:

app.service("DataService", function($http){
   var deferred = $q.defer();
   $http.get('resources/config.js').then(function (data) {
       deferred.resolve(data);
    });
    this.getData = function(){
       return deferred.promise;
    }
});

app.controller('someCtrl',['DataService', '$scope',function(DataService, $scope){
     var menuItems = [];
      $scope.menuItems = DataService.getData().menuBar;
}]);

no I cannot use service here. Because I am my config.js ia a property file where I have to pull my data to be placed in main code to remove hard code data. — Pallavi, Feb 12 '16 at 23:56
Just added it in case you wanted; you said you were new to Angular. Lmk if the rest works for you. — MaxRocket, Feb 13 '16 at 00:07
Can you set up a plunker or something so we can see the context? — MaxRocket, Feb 13 '16 at 00:11

Ng-repeat is not showing data coming from config.js

3 Answers3