Data is not loading to array in AngularJs

Question

I'm very new to AngularJs. I'm trying learning it. I am facing a problem but can't figured out what is the error.

I'm integrating AngularJs with SpringMVC. My problem is that data is comming from Spring controller but when i assign that data to array defined in angular controller. it do not copies to it.

This is my Angular controller

App.controller('productController',['$scope','productService', function($scope,productService){
var self=this;
var category={catId:null,catName:''};
self.categories=[];

self.categoriesForPrdouct= function(){
    productService.getCategories().then(
        function(commingData){
            self.categories=commingData;
            console.log(self.categories); //This line Prints Data 
        }, function (errResponse) {
            console.error('Error while fetching Categories');
        }
    );
};

 console.log(self.categories); // **This line do not prints the data.** 

self.categoriesForPrdouct();


self.reset = function(){
    category={catId:null,catName:''};
    $scope.myForm.$setPristine(); //reset Form
};

}]);

The first console prints the data but the second console do not.

and Second is i want to show the data in dropdown which i wrote it like this

<select id="itemCategory" ng-model="productCtrl.category.catName" ng-option="productCtrl.category.catName for category in categories">
</select>

Is this correct or wrong. i am confused in this one.

Actually i can't make fiddle data is comming from server here — Muhammad Danish Khan
– Muhammad Danish Khan, Commented Feb 4, 2016 at 8:10

Pratik Bhajankar · Accepted Answer · 2016-02-04 08:13:58Z

2

Or you can do one thing you can write {{categories}} to print data in html so as to you can have track of this variable in html page. and instate of angular js select you can modify the code where you apply ng-repeat

<select> <option ng-repeat="data in categories" value="data.catName"> {{data.catName}} </option> </select>

try this might be it will help

answered Feb 4, 2016 at 8:13

Pratik Bhajankar

1,1542 gold badges14 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

vamshi krishna kurella · Accepted Answer · 2016-02-04 08:31:25Z

2

Issue here is when you console.log outside the service call, it will print nothing because service call in Angular is asynchronous.

So whatver inside then() function will be called after few seconds and your array object will be populated. So nothing to worry!!

In View

You clearly mis-used ng-options. It's not ng-option

edited Feb 4, 2016 at 8:31

answered Feb 4, 2016 at 8:06

vamshi krishna kurella

3321 silver badge10 bronze badges

6 Comments

Muhammad Danish Khan Over a year ago

So why the data is then not loading into dropdown

vamshi krishna kurella Over a year ago

Y u r using ng-options in such a complicated and wrong way? Just use ng-options = category in categories

Muhammad Danish Khan Over a year ago

I have ng-options still data do not comes in dropdown

vamshi krishna kurella Over a year ago

use $scope.categories in controller. And also modify ng-options as I told above i.e. ng-options = category in categories. SHare the error on console if you find any!

Muhammad Danish Khan Over a year ago

What you have told i have done it. But error came which says Expected expression in form of 'select (as label)? for (key,)?_value_ in collection' but got 'catName in categories'

|

John Ephraim Tugado · Accepted Answer · 2016-02-05 01:01:11Z

1

Why are there no options?

See this :

<select id="itemCategory" ng-model="productCtrl.category.catName" ng-option="productCtrl.category.catName for category in categories">
</select>

Why did you add "productCtrl" ?

use this instead...

<select id="itemCategory" ng-model="productCtrl.category.catName" ng-option="category.catName for category in categories">
</select>

As to why the console.log didn't show, refer to other member's answers...

UPDATE: You are assuming that it is in the format category={catId:null, catName:''} while the value of categories is

["Apple","Black Berry","GFive","Samsung"]

You can either change it to {catId: null, catName:''} format or use it as is.

<select id="itemCategory" ng-model="productCtrl.category.catName" ng-option="category as category for category in categories">
    </select>

edited Feb 5, 2016 at 1:01

answered Feb 4, 2016 at 8:17

John Ephraim Tugado

7657 silver badges15 bronze badges

3 Comments

Muhammad Danish Khan Over a year ago

Still the Data is not loaded it just shows empty dropdown

John Ephraim Tugado Over a year ago

better check the value of the data received from the server. The properties are case-sensitive

Muhammad Danish Khan Over a year ago

i have printed the categories. It is printed with me in this format. ["Apple","Black Berry","GFive","Samsung"]. So do i have to change category={catId:null, catName:''} to just var catName.

ocket-san · Accepted Answer · 2016-02-04 08:14:30Z

I think you want the dropdown to have the categories right when the program starts, right? You go to your webapplication and the data is there, right?

Ok, well, there are a couple of things to notice here. Firstly this:

console.log(self.categories); // there is no data here yet 

self.categoriesForPrdouct(); //here you are filling self.categories

The function categoriesForPrdouct is supposed to fill the array self.categories. Even if categoriesForPrdouct would be a synchronous function, you cannot ask a variable for data but only fill the variable on the next line.

But then again, the categoriesForPrdouct is an asynchronous function. That means the callback function will get executed when your request is ready.

self.categoriesForPrdouct= function(){
    productService.getCategories().then(
        function(commingData){

           //so right here, this is the callback. You need to think of
           //think of this as code executed with a delay. This gets
           // executed when productService.getCategories() has finished 
           // doing what it is supposed to do. 

            self.categories=commingData;
            console.log(self.categories); //This line Prints Data 
        }, function (errResponse) {
            console.error('Error while fetching Categories');
        }
    );
};

Furthermore, If you want the data to be ready when your application starts, you should use the ng-init directive, like this:

<body ng-app="yourApp" ng-controller="productController as self" ng-init='self.categoriesForProduct()'>

Angular will run this right off the bat, filling up your self.categories variable.

I have a plunker with similar code here. Take a look at it, it might be helpful

Dmytro Zaverukha · Accepted Answer · 2016-02-04 08:03:25Z

0

Maybe this will work for you:

self.categoriesForProduct= function(){
    productService.getCategories().then(function(result){
            self.categories = result.data;
            console.log(self.categories); //This line Prints Data 
        }, function (errResponse) {
            console.error('Error while fetching Categories');
        }
    );
};

answered Feb 4, 2016 at 8:03

Dmytro Zaverukha

561 silver badge3 bronze badges

Collectives™ on Stack Overflow

Data is not loading to array in AngularJs

5 Answers 5

Comments

6 Comments

3 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

6 Comments

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related